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
<! 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.
<! 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,