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)