How To Build A Pure Css Using Online Tools Tutorial (part 4) Vertical Nav Menu

[Saint_Michael 3]

Step 4 Vertical Nav Menu

 

The next step is to add in a basic rollover menu so I bring you to the following online tool: Menu Generator Now with this online tool you can not only create vertical but also horizontal rollover menus. Since we will be doing a Verticle menu we will keep it on that option. Now the next part is deciding if we want it fixed, relative, or absolute. If we have learned anything it is insane trying to make a absolute or fixed position work perfectly for all three browsers (IE, FF, Opera).

 

So to keep our minds sane we will use relative, this is due to the fact that with relative position it will look fine in any browser with slight movements that are barely noticeable unless you really look. Next we want to set up our Horizontal alignment of where the menu will be upon adding it in. So we have left right and rtl . Since we want our menu on the left keep it as so, Next we set our vertical alignment "Top" "Bottom" instead of trying to explain this and it's usefulness heres a quote.

 

With an absolutely-positioned navbar, bottom alignment has massive inconsistencies in how it's interpreted - in Mac/IE5 and some Opera 7 builds, the navbar is placed at the bottom of the page; in most other supported browsers it's the bottom of the viewport; in Opera 5 and 6 it doesn't work at all, and the navbar is placed at the top. But with a relatively-positioned navbar, bottom alignment is just like top alignment, except that the y position pushes it upwards, rather than downwards.

 

Wasn't that fun kids??

 

Anyways to keep our lives simple we will select top alignment (most people do). Next is out XYZ positions, basically with these positions this will determine where the menu will be with in the structure at 0,0 coordinates (XY). With the z this is used to stack the menu just in case you use drop down menu's. So instead of the drop down menus showing in the back of the content it will show it up top of it. So our XY coordinates will be 0,0 just because you may want to edit those numbers to fit within your structure properly. Since we are not using drop down menu's set your z index to 0. Next we set the width I save you trouble and set it at 10.6 em.

 

NOTE=Of course if you making your own design you may want to save this step till after you do everything else. Reason being is that you will have to adjust the setting multiple times until it fits just how you like it.

 

 

 

Ok so far we have set the the Following:

 

-Vertical Menu

-relative postion

-left

-top

-XYZ coordinates

-width (optional last step)

 

Ok next is horizontal stripe (your guess is good as mine) Just read the info about it and see what you think

 

Info on Horizontal strip

 

I set it to none just for simplicity.

 

the next part is how we want our boxes to look like in terms of margin and padding. So our first option is margins, this will determine what kind of gap will be in between each link so we will select 0. Next is hte size of the border since we want to keep it nice keep it at one pixel since it will provide enough division for each link. Next is the left and right padding this is used to show how much of a gap the text will have on the left side of the box, so to keep it nice keep it at nine. Same thing with top and bottom it determines the gap between the text and top of the book and so keep it at five.

 

Ok next part is how do want the current text to look like, we could underline,bold it or something crazy like that, Make it big text or small, align left right or center and some other good stuff. Tutorial wise we will use the default settings so as to keep things moving along.

 

Not the next settings are for unvisited link meaning they havn't not been click before this includes the following.

 

-border colors

-border styles

-background color

-Font color

-font style

-additional CSS

 

Of course the question we ask ourselves is how should it look like, Best answer use the colors of the site to work with, as you can tell from the site we are using a light blue background so we want are background a blue so put in the following. Next we want to up a border so we will go with a light blue so put in the following 4 times #BFBFBF (for each side of the block. We keep the borders solid, however you can used dash or non at all and so we will keep it on solid. Next is font color so we want our text to be seen so we will use the color of our website #34729C. This time it will be a good idea to click on preview just to see what it looks like so far.

 

Now we set up our rollover styles, so if you all assume correctly will we set up the opposite colors so we will use a light background and dark text and border so put in the following:

 

#142E3F #142E3F #142E3F #142E3F

solid

#34729C

#34729C

normal

blank

 

Now for current links simple and eas used the same settings. Ok so we now set up how our menu should look like, Next we will generate the code,

 

NOTE=I didn't bother with the text stuff but you can if you want to.

 

OK so click on the first generate button and you should get he following code or something like it:

 

/* LUL1.0 :: Generated CSS [Created: Sat Jan 13 2007 02:55:15 GMT-0500 (Eastern Standard Time)] :: listulike.com/ */.lul,.lul li,.lul ul{margin:0;padding:0;list-style-type:none;}.lul{position:fixed;left:0;top:0;z-index:19000;width:10.6em;cursor:default !important;border:none;text-align:left;}* html .lul{position:absolute;}ul[id="lul"]{position:absolute;}ul/**/[id="lul"]{position:fixed;}.lul{margin-left:0px;margin-top:0px;}.lul li{display:block;width:10.6em;position:static;}@media Screen,Projection{.lul/**/[class="lul"] li{position:relative;}}.lul li a{position:relative;display:block;}.lul a{margin-top:-1px;}.lul a,.lul a:link{background-image:none;background-color:#142E3F;cursor:pointer !important;z-index:0;text-align:left;border-style:solid;border-color:#BFBFBF #BFBFBF #BFBFBF #BFBFBF;padding-left:9px;padding-right:9px;padding-top:5px !important;padding-bottom:5px !important;text-decoration:none;color:#34729C;border-width:1px;font-style:normal;font-family:tahoma,sans-serif;font-weight:bold !important;}.lul a{font-size:75%;}.lul li a,.lul li a:link,.lul li a:visited{letter-spacing:1px !important;}.lul li a:visited{background-image:none;background-color:#34729C;border-width:1px;color:#142E3F;font-style:normal;border-style:solid;border-color:#142E3F #142E3F #142E3F #142E3F;}.lul li a:hover,.lul li a:focus,.lul li a.nohref:hover,.lul li a.nohref:focus{font-style:normal;background-image:none;background-color:#34729C;text-decoration:none;color:#142E3F;border-color:#142E3F #142E3F #142E3F #142E3F;border-style:solid;border-width:1px;}* html .lul li a:active{font-style:normal;background-image:none;background-color:#34729C;text-decoration:none;color:#142E3F;border-color:#142E3F #142E3F #142E3F #142E3F;border-style:solid;border-width:1px;}@media screen,projection{* html .lul li{display:inline;}}@media screen,projection{* html .lul li{display/**/:block;float/**/:left;}}

This code will set up how the menu will look.

 

NOTE=I basically skipped the fonts and color generate but can use if you did the text set up above it..

 

Now open up your CSS file and then copy and paste this code under your left column CSS like so:

 

#leftcol {width:170px;float:left;position:relative;left:0;background-color:#33729d;border:solid 1px;}/* NEW STUFF / *//* Left Menu / */.lul,.lul li,.lul ul{margin:0;padding:0;list-style-type:none;}.lul{position:relative;left:0;top:0;z-index:0;width:10.6em;cursor:default !important;border:none;text-align:left;}.lul{position:static;padding-left:1px;padding-top:1px;}.lul li{display:block;width:10.6em;position:static;}@media Screen,Projection{.lul/**/[class="lul"] li{position:relative;}}.lul li a{position:relative;display:block;}.lul a{margin-top:-1px;}.lul a,.lul a:link{background-image:none;background-color:#142E3F;cursor:pointer !important;z-index:1000;text-align:left;border-style:solid;border-color:#BFBFBF #BFBFBF #BFBFBF #BFBFBF;padding-left:9px;padding-right:9px;padding-top:5px !important;padding-bottom:5px !important;text-decoration:none;color:#34729C;border-width:1px;font-style:normal;font-family:tahoma,sans-serif;font-weight:bold !important;}.lul a{font-size:75%;}.lul li a,.lul li a:link,.lul li a:visited{letter-spacing:1px !important;}.lul li a:visited{background-image:none;background-color:#ffc;border-width:1px;color:#142E3F;font-style:normal;border-style:solid;border-color:#ead4a4 #edbb85 #edbb85 #ead4a4;}.lul li a:hover,.lul li a:focus,.lul li a.nohref:hover,.lul li a.nohref:focus{font-style:normal;background-image:none;background-color:#34729C;text-decoration:none;color:#142E3F;border-color:#BFBFBF #BFBFBF #BFBFBF #BFBFBF;border-style:solid;border-width:1px;}* html .lul li a:active{font-style:normal;background-image:none;background-color:#34729C;text-decoration:none;color:#142E3F;border-color:#BFBFBF #BFBFBF #BFBFBF #BFBFBF;border-style:solid;border-width:1px;}@media screen,projection{* html .lul li{display:inline;}}@media screen,projection{* html .lul li{display/**/:block;float/**/:left;}}/* NEW STUFF END / */

Then go ahead and save, next open up your html file then locate the left column and delete the lipsum text and then put in the the following HTML

 

		<div id="leftcol" ><div id="navdemo">	<ul class="lul">		<li><a href="/" title="List-u-Like home page" class="warn">Home</a>		</li>		<li><a href="/generator/" title="List-u-Like CSS Generator" class="upper warn">Generator</a>		</li>		<li><a href="/help/" title="How to use the program" class="warn">Help</a>		</li>		<li><a href="/about/" title="About List-u-Like" class="warn">About</a>		</li>		<li><a href="/discuss/" title="Discuss List-u-Like" class="warn">Discuss</a>		</li>		<li><a href="/contact/" title="Contact the author" class="warn">Contact</a>		</li>	</ul>		</div>

Now go a head and save. So there you go you now have a vertical rollover nav menu. Now go back to your CSS and decide if you want to keep the border to your left column or not. I keep it up because you may need to balance out headers and other good stuff. Thats about it for menu now you can take the next step and go the extreme for you vertical nave in which I recommend the following website. http://forums.xisto.com/no_longer_exists/'>http://forums.xisto.com/no_longer_exists/[/url]http://forums.xisto.com/ These are some of the best design nav menus on the net simple to under stand and put it, so check them out and see what you like. But like I mention in previous tutorials we are just setting up the basic design the good stuff will come later.

 

Next Tutorial Content Boxes so stay tune for that.