nielcleo Posted September 6, 2011 Share Posted September 6, 2011 hi im doing a menu tricks.. a menu showing a info on the menu when its hover..here's the sample.. the menu Home Articles Tutorials the hover of the menu will appear the description of the link like the Resourceim tired doing other code to do this.. its doesnt workany code for this trick?here's the code i use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>SAMPLE BLOG POST</title><style>body, div, span, ol, ul, li { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; }body { background: white; line-height: 1; color: black; margin: 0; }ol, ul { list-style: none; }a { text-decoration:none;}body { background: #283943 url(images/body-bg.jpg)top center no-repeat; font-family: 'arial';}p { line-height:24px; font-size:12px; color:#000;}#menu{ background:#000; height:75px;}#menu-wrap { margin:0 auto; width:960px;}#navigation-main { padding:15px; color:#fff; font-size:24px; font-weight:bold; margin-bottom:10px; float:left;}#navigation-main li { float:left; margin-right:20px;}#navigation-main li a { display:block; color:#fff;}#navigation-main li ul { display:none; z-index:80;}.nav-sec { display:block; font-size:12px; font-family: lucida sans unicode; font-weight:normal; text-align:center;}</style></head><body><div id="menu"> <div id="menu-wrap"> <ul id="navigation-main"> <li><a href="">Home</a><span class="nav-sec"><a href="">The Beginning</a></span></li> <li><a href="">Articles</a><span class="nav-sec"><a href="">Tips, Tricks, Advice</a></span></li> <li><a href="">Tutorials</a><span class="nav-sec"><a href="">Photoshop Techniques</a></span></li> <li><a href="">Resources</a><span class="nav-sec"><a href="">Fonts, freebies, wallpapers</a></span></li> <li><a href="">Anything</a><span class="nav-sec"><a href="">Description</span> <li><a href="">Anything</a><span class="nav-sec"><a href="">Description</span> </ul> </div></div></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted September 6, 2011 Share Posted September 6, 2011 It can be done with js/css! if you want to do it with css, all you have to do, is create a default backgrount-image ( home.png, font.png, etc) for each of the links and then create another image (home-description.png, font-description, etc) for each of the links again. So the default background image for each link will just be there (fixed), but when it is hovered, it shows the other image, just like the default image (the first image), but with discriptions under it. HTML: to do it with html, make use of the title attribute. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 6, 2011 Share Posted September 6, 2011 OR, first you are missing closing anchor tags Edit: and Li tags should be <li><a href="">Home</a><span class="nav-sec"><a href="">The Beginning</a></span></li> <li><a href="">Articles</a><span class="nav-sec"><a href="">Tips, Tricks, Advice</a></span></li> <li><a href="">Tutorials</a><span class="nav-sec"><a href="">Photoshop Techniques</a></span></li> <li><a href="">Resources</a><span class="nav-sec"><a href="">Fonts, freebies, wallpapers</a></span></li> <li><a href="">Anything</a><span class="nav-sec"><a href="">Description</a></span></li> <li><a href="">Anything</a><span class="nav-sec"><a href="">Description</a></span></li> then use .nav-sec { display:block; font-size:12px; font-family: lucida sans unicode; font-weight:normal; text-align:center; visibility: hidden; } #navigation-main li:hover span.nav-sec {visibility:visible;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.