Jump to content

Need help on making a menu that looks like..


jpf566

Recommended Posts

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 :)

Link to comment
Share on other sites

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 />

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...