CSS Image Moving Menu

If you like menu in the shape of image or icon, I have good info for you; that is CSS image Moving Menu. With CSS Image Moving Menu, your Icon will move when visitors point their mouse over it. To see live demo, click the button below:

The following are the steps of creating CSS Image Moving Menu:
Step #1

1. Upload your image or icon that you want to install into your image host. As an example, Kang Rohman has uploaded the icon with size of 120 X 120 pixels into http://tinypic.com:
   
   
   For Icon, you can download it with free of charge, please read Kang Rohman’s article at  Free Icons For Website and Weblog
   
2. Write down your icon’s address that you get from tinypic, e.g. : http://i43.tinypic.com/2arep5.png
   http://i41.tinypic.com/20pxbmc.png
   http://i41.tinypic.com/2rhqtlf.png
   http://i40.tinypic.com/vqkvbl.png
   http://i44.tinypic.com/2lus08g.png
   
3. Determine the URL address that you want to place on the menu. E.g.:
   http://blogspottutorial.com
   http://www.blogspottutorial.com/search/label/free%20template
   http://blogtemplate4u.com/
   http://feeds2.feedburner.com/BlogspotTutorial
   http://www.blogspottutorial.com/search?max-results=200
   Now I suppose that you have the image address and URL address that you will use. Follow these steps:

Step #2

1. Log in to blogger with your ID
2. Click Layout.
3. Click Edit HTML
4. Click the Download Full Template. Now backup your template.
5. Install the code below, above the code ]]></b:skin>

   #imagemove {
           padding:0;
           margin-left:30px;
           list-style-type:none;
           height:120px;
           }
   #imagemove li {
           display:block;
           float:left;
           width:120px;
           height:120px;
           position:relative;
           margin:0 15px 7px 0;
           }
   #imagemove li a {
           display:block;
           width:120px;
           height:120px;
           background:transparent;
           overflow:hidden;
           position:relative;
                   padding:5px;
           }
   #imagemove li a img {
           width:100%;
           height:100%;
           border:0;
           margin-right:30px;
           padding:5px;
           }
   #imagemove li a:hover{
           position:absolute;
           left:0px;
           top:20px;
           padding:5px;
           width:120px;
           height:120px;
           z-index:100;
           }
   

6. Click Save Template. Wait until the process of saving done
7. Click Page Elements.
8. Click Add a Gadget.
9. Click the sign plus (+) for JavaScript/HTML.
   
10. Copy and paste the code below into the available area.
    <ul id="imagemove">
    <li><a href="http://blogspottutorial.com"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>
    <li><a href="http://www.blogspottutorial.com/search/label/free%20template"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>
    <li><a href="http://blogtemplate4u.com"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>
    <li><a href="http://feeds2.feedburner.com/BlogspotTutorial"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>
    <li><a href="http://www.blogspottutorial.com/search?max-results=200"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>
    </ul>
    
11. Click Save button.
12. Move the element you have made exactly under element header. Click Save button at the right top. Note: to create the element exactly under header, you can read at the post  How to make element below of the header.
13. Done

The CSS Image moving menu uses only the CSS code without JavaScript, so that it won’t burden your blog for loading.
This is only an example, the image and link address must be changed with yours. You have to adjust the CSS code with your template, the placement under header is not a must. Please determine the best position for your CSS Image moving menu.
Icon from : http://vistaicons.com/
Inspirated code ; http://www.cssplay.co.uk