View Full Version : Vertical Nav Menu CS5

04-21-2011, 12:14 PM
Hi Guys

Just wondering if anyone can help me I have being using CS3 to do all my websites but I ventured into the world of CS5, well I downloaded the trial version to look over before I hand over the credit card details and buy it. First look and it looks really cool the thing I noticed (I'm sure there are other changes as well), is that they have removed the vertical navigation insert from the menu bar at the top.
Anywhere I looked people were saying that to get a vertical menu bar you should either use a spry menu or make one from css. I was looking to create a vertical menu bar with a rollover effect, and I started to make the bones of it in css but no matter what I try I can get it to appear or work on my html page.

I just quickly opened a html template from the samples in CS5 (3 column fixed, header and footer) and although it has an example of an ul list there, I changed the wording ( it only had link1,link2 etc.) to the ones I need and added in some more:

<div class="sidebar1">
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">sport</a></li>
<li><a href="#">greenschool</a></li>
<li><a href="#">policies</a></li>
<li><a href="#">schoolnews</a></li>
<li><a href="#">classes</a></li>
<li><a href="#">calendar</a></li>
<li><a href="#">contact</a></li>

On the page all the new vertical menu links appear except they are just using the default colours etc. that were on the template. I want them to display the images I created in photoshop for the menu tabs.

I can't seem to find where to add the css code that I created to it so as it will use the vertical menu with my images and rollovers etc. Below is my css code.

@charset "UTF-8";
/* CSS Document */

ul { width:100px; }
li { list-style-type:none; }
li a { height:100px; display:block; }

li.home { background-image:url(/images/home.jpg); }
li.sport { background-image:url(/images/sport.jpg); }
li.greenschool { background-image:url(/images/greenschool.jpg); }
li.policies { background-image:url(/images/policies.jpg); }
li.schoolnews { background-image:url(/images/schoolnews.jpg); }
li.classes { background-image:url(/images/classes.jpg); }
li.calendar { background-image:url(/images/calendar.jpg); }
li.contact { background-image:url(/images/contact.jpg); }

li.home a { background-image:url(/images/home2.jpg); }
li.sport a { background-image:url(/images/sport2.jpg); }
li.greenschool a { background-image:url(/images/greenschool2.jpg); }
li.policies a { background-image:url(/images/policies2.jpg); }
li.schoolnews a { background-image:url(/images/schoolnews2.jpg); }
li.classes a { background-image:url(/images/classes2.jpg); }
li.calendar a { background-image:url(/images/calendar2.jpg); }
li.contact a { background-image:url(/images/contact2.jpg); }

li a:hover { background-image:none; }

I tried adding in the link href but that didn't work either:

<link href="nav.css" rel="stylesheet" type="text/css" />

If I'm honest this is my first real venture into css menus, I understand creating css rules for background images etc. but I couldn't see where to create a rule to get the menu to display my images. I know I'm probably leaving out some major thing that is stopping this from working so if any of you guys could help I would be very grateful. I'm not looking for someone to sit down and write me the code (how would I ever learn it for myself :) ) but if you have created a vertical menu using css and CS5 and you could pass some advice my way it would be much appreciated. Or is the problem that I'm using a template from CS5 to build my page on?

All the best guys

04-21-2011, 12:58 PM
The style sheet provided with that layout by CS5 already has styles for the menu (and the styles are commented to help you understand them).

ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */

Etc., etc.

You should modify or add to them.

The rules you created will apply to any unordered list on your page but they are overwritten by the existing rules (ul.nav, etc.) which are more specific.

BTW, the rules you've written don't work like you apparently expect them to:

For instance li.home will only apply to a list item <li> with the style class "home" applied. Like this:

<li class="home">content</li>

04-21-2011, 04:02 PM

Thanks for posting. Ok i messed with the style sheet in my html template ( ul.nav etc.) I just changed settings etc. to see what everything did to try get my head around stuff.

Before I get bogged down in this I better see if what I want to do is possible, I suppose that should have being my very first question...my bad :)

I would like a vertical menu running along the side of the screen but instead of the normal boxes that is in the dreamweaver template, I would like to use images for the menu buttons. Say for a sport page there would be tab with a football on it and "sport" written on it, for news there would be something like a newspaper with the word "latest news" on it, you get the idea. Each menu button will be the same size just with different images on them. I already have the menu buttons done up in photoshop it's just now a matter of getting them onto my html template. In CS3 it was just a matter of clicking insert navigation bar and then pointing to the images that you wanted to use for your menu. I think though with CS5 there will be a bit more involved in it. I would honestly love to be able to get my head around it because I reckon once I get one out of the way it will get easier to do others.

04-21-2011, 05:13 PM
You either need to place images as the links or place images as the CSS background for the links.

04-22-2011, 09:43 AM
Thanks a million again for taking the time to post.
I had a look at what you said and although it's not exactly a menu and I have probably taking the easy way out, what I've done is just Insert - Insert Image Rollover and then created a separate rollover for all the images I have with links to the pages I want them to go to. I know this is probably a messy way to create a vertical rollover menu but until I get my head around css it will have to do :)