Jump to content
Stef's Coding Community
Sign in to follow this  
StaticElectricityMan

Two separate Navigation Menus

Recommended Posts

I'm not sure if this is possible. Is it possible to have two different navigation menus? One covered by the css script (which I have working at the moment) and another in the html file? What I have is a navigation bar running horizontally across the (near) top of my page and I would like to add a vertical navigation bar on the left side for some of my pages while keeping the main navigation bar at the top. Is this possible?

Share this post


Link to post
Share on other sites

Yes, it's possible. You would just need to add an id or class to each menu so that they can be styled separately. For example....

 

 

and

 

 

And your CSS would look something like this....

 

ul#horizontal-menu {

 

}

 

ul#horizontal-menu li {

 

}

 

ul#vertical-menu {

 

}

 

ul#vertical-menu li {

 

}

 

and so on.

 

Does that make sense?

Share this post


Link to post
Share on other sites

Well, I thought so...not sure why this is written two different ways...does it matter?

 

ul#menu {

width: 103%;

background: #A6C7E3;

float: left;

}

#menu ul {

list-style: none;

margin: 0;

padding: 0;

width: 12em;

float: left;

}

 

Basically, I would be changing the #menu to #menu-horizontal (and then making the appropriate changes in the html file) but does it matter where the ul is located or if there is a space or not?

Share this post


Link to post
Share on other sites

The order of class or id matters a lot.

ul#menu {}

goes with

 

#menu ul {}

goes with

 

It;s best to do what Susie said and have id or class with a different name.

Share this post


Link to post
Share on other sites

I always write it ul#menu. And you don't need to use menu-horizontal. That was just an example. It could be anything. Maybe the horizontal one could be menu-top and the vertical one could be menu-left.

Share this post


Link to post
Share on other sites

Hmmm, I changed/goofed something up with this. Now its not displaying properly across the top at all. I used this navigation bar following a tutorial, so I'm not sure why they did what they did.

 

In the html, they are using a

instead of
  • . What is the difference between the two? Would it be helpful if I posted the complete code for the css and html? Its not too crazy as yet.

Share this post


Link to post
Share on other sites

As I said in my last post, you have to be careful to match up the order of the styles with the order in the html markup; if the id is after the ul tag in the style, it must be after the ul tag in the markup, and vice versa; read my post again.

Share this post


Link to post
Share on other sites

Wickham, yes, I'm being careful with the two. I'm just wondering why the tutorial had me use a div...what was the purpose of using the div and what is the difference between the ways you've suggested and using a div?

 

Susie, I will try to put something up. I'm using a few different navigation bars and doing some research...sounds like I can use a separate css for just navigation bars and plop them in on the necessary pages?

Share this post


Link to post
Share on other sites
Guest seana0624

Hello fellow designers. I'm probably newer to the forum and Web designing than anyone else here so please excuse my simple minded questions. My first question is what book would be best for a new beginner to web design and CSS other than the dummies book.

 

My second question has to do with bordors, height and width. I'm not sure how to guage pixels sizes so I really clueless. Can someone assist me in better understanding this area of web design.

Share this post


Link to post
Share on other sites

This is what I have so far (don't bother clicking the links).

http://staticelectricityman.com/caa/cgi-bin/Main.html

 

The navigation bar/menu works the way I'd like it to work, but I'd like to add a second navigation bar for a few pages (like the Residential page, for example) like this one right here:

http://www.cssplay.co.uk/menus/page_menu2.html

 

Obviously, I need to change up the images and all that but I can't seem to get it to align on the left with a straight cut and paste. It sticks to the end of the current navigation bar. I'm thinking if I use a separate css for this menu, I can attach it to only the pages I need (like the Residential page). Also, they have this using images...is it possible to do a similar thing but use html files instead of images?

Share this post


Link to post
Share on other sites

I'll take a look at this soon (just returned from picking up my kids from school), but I'm just curious.... For the side menu, would you be interested in something like this? http://css.maxdesign.com.au/listamatic/vertical08.htm'>http://css.maxdesign.com.au/listamatic/vertical08.htm There are several samples on that site: http://css.maxdesign.com.au/listamatic/ .

 

The reason I ask is that the menu you linked seems to be a bit more than needed. I think it would be better to have people click a link and be taken to a new page in your site. Just my opinion. :)

Share this post


Link to post
Share on other sites

Susie, that's kind of what I was originally thinking...and I'm open to suggestions. The way the page is set up seemed to favor the hoverpage style. For example, the Residential page would take you to a generic page with that crazy hovernavbar but the Residential projects we do has far too much information to contain on one page. For example, under Residential we would have Remodels, Additions, Historic Preservation, Standard Plans, etc...each of those subsections would contain images and projects we've worked on. I do agree it seems a little over the top.

Share this post


Link to post
Share on other sites
The way the page is set up seemed to favor the hoverpage style. For example, the Residential page would take you to a generic page with that crazy hovernavbar but the Residential projects we do has far too much information to contain on one page. For example, under Residential we would have Remodels, Additions, Historic Preservation, Standard Plans, etc...each of those subsections would contain images and projects we've worked on. I do agree it seems a little over the top.

 

The thing is, if your visitor wants to open a page and stay there so they can read and come back to it without having to keep their mouse over the nav item, they may get frustrated. I think it would be far better to have each link open a new page within the site so people can come and go as they please.

 

For example, http://www.iconeden.com/contact/about . You don't have to keep your mouse over the links to view the content.

Share this post


Link to post
Share on other sites

Susie, I agree and I've convinced "the committee" to abandon the previous idea. Thank you for the excellent suggestion and I also hadn't noticed that if my mouse strayed too far from the field that it would default back to the top "page" of the navbar.

 

I think I'm going to try to implement a toolbar on the side similar in style to the top bar and make a separate css for it to use in the appropriate pages.

Share this post


Link to post
Share on other sites

Well, I almost have the menus working properly. It seems like the new menu overrides part of the horizontal menu (the home button) while also pushing the body down below itself. Here is the link again, I've updated the work:

http://staticelectricityman.com/caa/cgi-bin/Main.html

 

The link takes you to the main page so you can see the horizontal bar as it should be but if you click Project List and then Residential, you can see the new vertical side navigation bar and how it obliterates the HOME button and pushes everything down. How do I make the body not bump down and how do I fix the new menu obliterating the HOME button?

Share this post


Link to post
Share on other sites

If you add "clear:both;" to the CSS of the #ddMenu, that'll stop it from hiding the home button. Also, if you add "float:left" that'll move it into position -- you'll probably need to tweak the positioning a bit, but it's a start.

 

Also -- minor detail -- you probably want to put the link to your CSS file () within the

section of the file, rather than along with all your content in the .

Share this post


Link to post
Share on other sites

Hi, I would like to ask a similar question - that is, I'm trying to add a second navigation menu on my homepage that will offer different language versions of the site but I don't want it to have the same active/hover/visited properties (size, color) as my main navigation menu. I am making the page in Dreamweaver but I am struggling with this particular issue. Would very much appreciate any help! Thank you!

Share this post


Link to post
Share on other sites

Assuming that your two menus have a containing ul or div, give each a different id, then style them separately:-

#menu1 a:link { color: red; }
#menu1 a:visited { color: blue; }
#menu1 a:hover { color: lime; }
#menu1 a:active { color: purple; }

#menu2 a:link { color: green; }
#menu2 a:visited { color: skyyblue; }
#menu2 a:hover { color: teal; }
#menu2 a:active { color: violet; }

Share this post


Link to post
Share on other sites

Wickham, thanks so much for your advice and the code! - I've tried it and it works perfectly!

Is there also a way how to define a selected link (i.e. when people click on "contact us", for example, I'd like to have this link of the menu highlighted or in a different color). Or, when you have a language selection, how can I make the selected language's link look selected? I've tried #menu1 a:selected { color: red; } but it doesn't do anything so I guess that's not the way...

Thank you again!

Milly

Share this post


Link to post
Share on other sites

I'm not sure about the language selection thing, I'd have to see it (and may still not know :rolleyes: ) but to change your menu to a different color when people hover or click it, just see the code Wickham gave you - in his example, menu 1 links will turn lime when the curser hovers over them and purple the very moment the link is clicked. (or teal/violet in his menu 2 example).

 

Or are you talking about indicating the current page in your menu? As in, if you're on the contact page for example, the contact tab would be a different color?

Share this post


Link to post
Share on other sites

There are several ways to highlight the menu tab for the current page.

 

Item 1 here is the simplest, but needs a different code for every page, so if you want to change a link url or add a link, you have to edit every page:-

http://www.wickham43.net/highlighthome.php

 

The second example enables you to have the same menu code for every page, which you put in a PHP "include" file, so you don't have to edit every page when you change a link url or add an extra main page, you just change the menu in one file. However, you will have to edit them in the beginning to add a different id for every page, then the common menu has "matched pairs" code so that when the page id matches an id in the menu, the menu style changes.

 

The matched pairs styles for the stylesheet are shown:-

#home li#homelink a, #about li#aboutlink a, #services li#serviceslink a { background-color: #ff0000; } 

 

The third example similar, but with colored buttons and the fourth example is all PHP.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...