Hello again..
Last tutorial i showed you how to create a [url=http://theftalk.com/t24469-Custom-Banner-with-Navigation-%28UPDATED%29.html]Custom Banner With Navigation[/url]. Now you can use this trick for the advance mouse over effect and making an untypical horizontal list menu for your navigation by using css.
[u][b]Overview[/b][/u]
[b]Required Images to make this trick[/b]
[b]Background image of the menu[/b]
[img]http://i173.photobucket.com/albums/w76/myparis16/comments-author.jpg[/img]
[b]Menu Item 1[/b]
[img]http://i173.photobucket.com/albums/w76/myparis16/home.png[/img]
[b]Menu Item 2[/b]
[img]http://i173.photobucket.com/albums/w76/myparis16/msg.png[/img]
[b]Menu Item 3[/b]
[img]http://i173.photobucket.com/albums/w76/myparis16/kissme.png[/img]
[color=#bbbbbb]_______________________________________________________________________[/color]
The trick here is to shift the position of the background-image when the link is hover by using the background-position property:
[img]http://i173.photobucket.com/albums/w76/myparis16/demo.gif[/img]
[color=#bbbbbb]_______________________________________________________________________[/color]
Lets start coding, In your html file insert this:
[quote]<ul id="navi">
<li><a href="#" class="home">HOME</a></li>
<li><a href="#" class="msg">MSG</a></li>
<li><a href="#" class="kissme">KISSME</a></li>
</ul>[/quote]
The css part:
[b]#navi[/b]
This is the container of the menu, insert the main background image and set its position to relative
[quote]#navi{
padding:0px;
margin:0px;
list-style:none;
height:93px;
width:490px;
background-image:url("comments-author.jpg");
background-repeat:no-repeat;
background-position:left top;
position:relative;
}[/quote]
[b]#navi a[/b]
The purpose of text-indent here is to hide the text
[quote]#navi a{
text-indent:-1000%;
position:absolute;
background-position:left top;
background-repeat:no-repeat;
outline:none;
}[/quote]
[b]#navi a:hover[/b]
This will shift the background-position of the menu items when hover from top to bottom
[quote]#navi a:hover{
background-position:left bottom;
}[/quote]
Set each menu items:
The width is specified depending on the width of background-image.
While the height is divided by 2.
Then set each top and left property for the effect of untypical horizal list menu
[quote]#navi .home{
background-image:url("home.png");
width:82px;
height:55px;
top:30px;
left:40px;
}
#navi .msg{
background-image:url("msg.png");
width:88px;
height:50px;
top:30px;
left:180px;
}
#navi .kissme{
background-image:url("kissme.png");
width:112px;
height:49px;
top:40px;
left:350px;
}[/quote]
[b]DONE[/b]
[b][url=http://mark16.fileave.com/Friendster/tuts/advcss_mhover]PREVIEW[/url][/b]
Reminders:
To much effects and scripting in your profile makes it

for me.
Try not to focus on scripting, learn how to design a simple but unique page. Study first CSS.
Last edited by myparis (2008-05-24 13:58:54)