AIO Tm : CSS Image Moving Menu...
Wednesday, November 18, 2009Posted by
Raj Kumar.G
0 Comments
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
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
Step #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
- 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
-
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:
- Log in to blogger with your ID
- Click Layout.
- Click Edit HTML
- Click the Download Full Template. Now backup your template.
- 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;
}
- Click Save Template. Wait until the process of saving done
- Click Page Elements.
- Click Add a Gadget.
- Click the sign plus (+) for JavaScript/HTML.
- 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>
- Click Save button.
- 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.
- Done
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
Subscribe to:
Post Comments (Atom)
