jpf566 Posted January 19, 2010 Report Share Posted January 19, 2010 Hey guys, I just saw a really cool, clean menu on a site and was wondering how in the world I would replicate it? the site is kineda.com I believe this site was made with Wordpress but I'm trying to see how I can make this type of menu myself (HTML,CSS ect) I know i could make a menu like that with rollover images but I'd like to keep my links all text based for SEO reasons. Does anyone know how I could make this? Thanks for any help Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2010 Report Share Posted January 19, 2010 You could do it with an unordered list: > </pre> <ul id="navigation"> item item item item item </ul> And then add some css: <br />#navigation { overflow: auto; background: black; padding: 20px; }<br />#navigation li { float:left; list-style: none; margin-right: 1px; font-family: Arial; font-size: 14px; }<br />#navigation a { display:block; padding: 10px 20px; border-top: 1px dotted white; color: white; text-decoration:none; }<br />#navigation a:hover { border-top: 1px dotted red; color:red; }<br /> Quote Link to comment Share on other sites More sharing options...
jpf566 Posted January 19, 2010 Author Report Share Posted January 19, 2010 COOL, Ill have to try that later...I thought for sure those dots were an image.. CSS is sweet! Now what about the triangular dots in-between each menu item? Is that an image or can you use some type of styled bullet in CSS? THANKS! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 19, 2010 Report Share Posted January 19, 2010 The triangular dots are most likely a background image. You could add a background image on the s for that. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 19, 2010 Report Share Posted January 19, 2010 The red dots? See this http://www.kineda.com/wp-content/themes/vega/images/nav_pipe.gif very small dot. Quote Link to comment Share on other sites More sharing options...
jpf566 Posted January 19, 2010 Author Report Share Posted January 19, 2010 BAM!!! How'd you find that? In the code or did you right click? I tried right clicking and it wasn't working hehe. Im guessing those dots are used as a custom list item image? or maybe just placed embedded into the page Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 19, 2010 Report Share Posted January 19, 2010 (edited) First I started looking in the code but didn't see a code, I thought it might be a bullet which is from here http://www.tedmontgomery.com/tutorial/HTMLchrc.html Then because there were so many css files I decided to use Firefox Tools Page Info Media which lists all the images used on a page, and it was there. Very simple. The code for the first link Style is Style so the gif is probably a background image for the span tag, but I haven't got the time to find it. Here it is #nav .panel li a { font-size: 0.688em; border-top: 1px transparent; color: #fff; background: transparent url(images/nav_pipe.gif) no-repeat scroll 100% 49%; } Edited January 19, 2010 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.