Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
[Code]CSS styled navigation menu.
Topic Started: Sep 3 2007, 12:12 PM (683 Views)
kitsune-rei Sep 3 2007, 12:12 PM Post #1
Member Avatar
Kitsune
*   *  
 Keep in mind that this can be done in HTML.

Put this anywhere and edit the links.
Code: HTML
 
<ul id="navigation">
<li><a>Link</a></li>
<li><a>Link</a></li>
<li><a>Link</a></li>
<li><a>Link</a></li>
</ul>


Now add this to your CSS

Code:
 

ul#navigation { margin-left:0; padding-left: 0; list-style-type:none;}
ul#navigation a {display:block; text-decoration:none; background: #036; color: #FFF; padding: .2em .5em; border-top: 1px solid #fff; width:7em;}
ul#navigation a:hover {background: #69c; color:#000;}
ul#navigation li {Display:inline;}


Preview is here:http://www.freewebs.com/darakadgein/Navigaltion2.html
Offline Profile Quote Post Goto Top
 
chrono clepsydra Sep 4 2007, 12:40 PM Post #2
Member Avatar
Self-Proclaimed Starchaser
*   *   *  
kitsune-rei
September 3, 2007 12:12 PM
Keep in mind that this can be done in HTML.

Put this anywhere and edit the links.
Code: HTML
 
<ul id="navigation">
<li><a>Link</a></li>
<li><a>Link</a></li>
<li><a>Link</a></li>
<li><a>Link</a></li>
</ul>


Now add this to your CSS

Code:
 

ul#navigation { margin-left:0; padding-left: 0; list-style-type:non;}
ul#navigation a {display:block; text-decoration:none; background: #036; color: #FFF; padding: .2em .5em; border-top: 1px solid #fff; width:7em;}
ul#navigation a:hover {background: #69c; color:#000;}
ul#navigation li {Display:inline;}


Preview is here:http://www.freewebs.com/darakadgein/Navigaltion2.html

Is there a way to make each link side by side rather than going vertically?
Offline Profile Quote Post Goto Top
 
kitsune-rei Sep 5 2007, 05:10 PM Post #3
Member Avatar
Kitsune
*   *  
 Add this CSS instead.

Code:
 


ul#navigation { margin-left:0; padding-left: 0; list-style-type:none; background:#036; float:left; width:100%;}
ul#navigation a {display:block; text-decoration:none; background: #036; color: #FFF; padding: .2em .5em; border-top: 1px solid #fff; width:7em;float:left;text-decoration:none;color:#fff;background:#036;border-right:1px solid #fff;}
ul#navigation a:hover {background: #69c; color:#000;}
ul#navigation li {Display:inline;}
Offline Profile Quote Post Goto Top
 
InterGamer Sep 8 2007, 12:24 PM Post #4
Member
*  
 Any possible way to make other links drop down below the link hovered over?
Offline Profile Quote Post Goto Top
 
kitsune-rei Sep 9 2007, 01:26 AM Post #5
Member Avatar
Kitsune
*   *  
InterGamer
September 8, 2007 12:24 PM
Any possible way to make other links drop down below the link hovered over?

That would require some JavaScript, I do not know enough of that, sorry!
Offline Profile Quote Post Goto Top
 
Nevo Sep 9 2007, 11:04 AM Post #6
Member Avatar
Im Nevo eh?
*   *  
 Its a cool code but i would much prefer it if we could edit the background image. I mean, that blue just way to plain... ;)
Offline Profile Quote Post Goto Top
 
kitsune-rei Sep 10 2007, 01:11 AM Post #7
Member Avatar
Kitsune
*   *  
Nevo
September 9, 2007 11:04 AM
Its a cool code but i would much prefer it if we could edit the background image. I mean, that blue just way to plain...  ;)

It is not an image.

How ever I can make it so that you can add one.
Offline Profile Quote Post Goto Top
 
Nevo Sep 10 2007, 11:34 AM Post #8
Member Avatar
Im Nevo eh?
*   *  
 That would be very cool. :shifty:
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Code Snippets · Next Topic »
Add Reply