Basic "How to" for ul nav

I know this should be inside tutorial section but there are a number cobwebs in that portion of the forum!

I just were going to post a uncovered bones navigation together with hover effect for those who don’t know how. I see plenty of navbars that have excessively much code for what they are doing. So this can be pretty srtipped down and can be enhanced, but it really doesn’t need a lot else.

Notice how little markup is necessary to render this specific, not very a lot css either. Just copy and paste this whole code in the blank doc.

Watch Example

Code:
<! DOCTYPE html page PUBLIC " -//W3C//DTD XHTML ONE PARTICULAR. 0 Transitional//EN"
" http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
< html page xmlns=" http: //www. w3. org/1999/xhtml" >
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />
< title> Untitled Document< /title>


< design type=" text/css" >

#navbar
background-color: #663399; /* #navbar div is often a wrapper for this ul list*/
height: 30px;


#navbar ul
border: 0; /* Changing that margin here will require
changing the #navbar height to build with the ul*/


#navbar li
drift: left; /* This will likely put the li's in the row*/
list-style-type: it's unlikely that any; /* This strips the bullet*/


#navbar li a /* The nuts and bolts of the area surrounding a person's text links*/

text-decoration: it's unlikely that any;
color: #FFFFFF;
size: 100px;
padding: 5px;
text-align: facility;
display: block; /* This is what allows for with all the text links to act for a box*/


#navbar li any: hover
background-color: #9999CC;
text-decoration: it's unlikely that any;





< /style>
< /head>

< body>

<! --Start NavBar-->

< div id=" navbar" >
< ul>
< li> < any href=" #" > Home< /a> < /li>
< li> < any href=" #" > Services< /a> < /li>
< li> < any href=" #" > Portfolio< /a> < /li>
< li> < any href=" #" > With regards to Us< /a> < /li>
< li> < any href=" #" > Contact< /a> < /li>
< /ul>
< /div>

<! --End NavBar-->


< /body>
< /html>

This should be a sensible way to learn ul navigation by changing many parameters and examine what the results are when you can. Enjoy!

p. azines. I will post one for your vertical menu as well, Just need to change a couple of things.

———————————————————————————-

And here is a vertical you. A little different and also a tad more difficult but again, play for it and watch what happens.

Code:
<! DOCTYPE html page PUBLIC " -//W3C//DTD XHTML ONE PARTICULAR. 0 Transitional//EN"
" http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
< html page xmlns=" http: //www. w3. org/1999/xhtml" >
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />
< title> Untitled Document< /title>


< design type=" text/css" >


#navcontainer
background-color: #5681C6;
padding-top: 10px;
size: 142px;


#navcontainer ul

margin-left: 1px;
list-style-type: it's unlikely that any;
margin-top: 0px;
padding-left: 0px;



#navcontainer any

display: block;
foam: 7px;
width: 125px;
background-color: #5681C6;



#navcontainer any: link, #navcontainer any: visited

color: #FFFFFF;
text-decoration: it's unlikely that any;


#navcontainer a: are positioned

background-color: #FFFFFF;
colour: #212C4A;


< /style>
< /head>

< body>

< div id=" navcontainer" >
< ul id=" navlist" >
< li> < any href=" #" > Home< /a> < /li>
< li> < any href=" #" > Programs< /a> < /li>
< li> < any href=" #" > Kits< /a> < /li>
< li> < any href=" #" > Weight/Pricing< /a> < /li>
< li> < any href=" #" > FAQ< /a> < /li>
< li> < any href=" #" > Testimonials< /a> < /li>
< li> < any href=" #" > Events< /a> < /li>
< li> < any href=" #" > Contact< /a> < /li>
< /ul>

< /div>
< /body>
< /html>

So sorry guys, I forgot that will put links to the examples so you could view these folks. They are in the previous post today. Man I detest being dumb.

Thanks Aero — I agree that is really necessary here.

CSS is da bom : look what that can be done with so bit of code!

Mind only post one of my own

Ok, I just quickly whipped this specific vertical list ” up “, just to indicate another example. This one doesn’t require a lot of code either, in addition to has what WE call ‘separators’. Quite nice, and I’ve found it on some sites throughout the net. It’s not the most effective, but I don’t design it that they are attractive,

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *