Welcome!

And don't forget to edit your signature & profile.

 

Icon

Smashing Links

Statistics

  • Total posts 23318
  • Total topics 4048
  • Total members 5574
  • Our newest member
    ALF5583

TOP POSTERS

View unanswered posts View active topics

Board index » Coding & Scripting » JavaScript & AJAX

Expandable Navigation Bar

All problems related to JavaScript and AJAX are discussed and resolved here.
  Post a reply
   

Expandable Navigation Bar

Postby one9ooh6 » Sun Sep 20, 2009 10:26 pm

What is the best way to add a horizontal expandable navigation bar? I have read many blogs some suggest, javascript, other suggest HTML/CSS. Any advice...I would love to read any articles based on your advice. Thanks!
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Sun Sep 20, 2009 10:29 pm

Eh.

You're being exceptionally vague about what you want here. How about making an image or at the very least take some time to write a proper explanation of what you want?
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Sun Sep 20, 2009 10:50 pm

I am basically looking for a simple horizontal expandable navigation bar/menu based on the following links and sublinks:

Home
About Us
History
Officers
Committee Chairperson
Convention
Membership
Publications
Events
Photo Gallery
Contact Us

Does this help?
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby jingjang » Mon Sep 21, 2009 6:07 am

search gooogle: suckerfish menu
good luck
User avatar
jingjang
Smashing <table>
 
Posts: 37
Joined: Thu Dec 18, 2008 3:06 am
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Mon Sep 21, 2009 7:09 am

one9ooh6 wrote:I am basically looking for a simple horizontal expandable navigation bar/menu based on the following links and sublinks


So, you're looking for a drop-down menu?
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Mon Sep 21, 2009 5:08 pm

Yes sir..a drop down menu....
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby disoooner » Tue Sep 22, 2009 4:28 am

maybe you find here

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

what you looking for.
User avatar
disoooner
Smashing <frame>
 
Posts: 17
Joined: Fri Aug 07, 2009 6:16 am
Location: South Germany
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Tue Sep 22, 2009 8:11 am

Here you go.

A two-level drop-down navigation menu:

Code: Select all
#navigation {
   background: #ccc;
   height: 1.6em;
}

#navigation h2 { /* hide heading */
   left: -9999em;
   position: absolute;
}

#navigation ul {
   background: #ccc;
   list-style: none;
   margin: 0;
   padding: 0;
}
         
#navigation li {
   display: block;
   float: left;
   position: relative;
   white-space: nowrap;
}

#navigation li li {
   float: none;
}

#navigation a {
   display: block;
   line-height: 1.5em;
   padding: 0 0.3em;
}

#navigation li ul { /* hide submenu */
   position: absolute;
   left: -9999em;
}

#navigation a:hover { background: #aaa }
#navigation li:hover ul { left: 0; } /*show submenu */


Code: Select all
<div id="navigation">
   <h2>Navigation</h2>
   <ul>
      <li>
         <a href="#">Top-level item</a>
         <ul>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Top-level item</a>
         <ul>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
            <li><a href="#">Sub-level item</a></li>
         </ul>
      </li>   
      <li><a href="#">Top-level item</a></li>      
      <li><a href="#">Top-level item</a></li>
   </ul>
</div>


You're going to need some javascript for IE6 as it does not support hover states on anything besides anchors.
If you are unfamiliar with javascript, you could pull in IE7.js that would automagically fix that problem for you.
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Tue Sep 29, 2009 2:41 pm

Thanks so much everyone, specifically Andy! I have a couple of questions:
1) how to convert the ems to px
2) how to make the nav bar look like buttons.

Thanks!
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Tue Sep 29, 2009 3:37 pm

one9ooh6 wrote:how to convert the ems to px


1em is a fractional representation of 100% of the inherited font size.
The font size is inherited from its parent and then used to recalculate the new size (unless you used absolute units). That leaves us with the following equation to convert ems to px:

size (em) × inherited font size (px) = size (px)

The document's default font size usually equates to 16 pixels.

Example:
Code: Select all
h1 { font-size: 2em } /* 2em × 16px (inherited from document) = 32px */

...

<body>
<h1>heading</h1>
</body>


Code: Select all
body { font-size: 0.5em } /* 0.5em × 16px (inherited from document) = 8px */
h1 { font-size: 2em } /* 2em × 8px (inherited from body) = 16px */

...

<body>
<h1>heading</h1>
</body>


Got it?

one9ooh6 wrote:how to make the nav bar look like buttons.


By styling the anchor tags? Wouldn't hurt if you would be a bit more specific about what you mean by "button".

If you mean styling it to look like a form button then play around with background-color and border.
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Tue Sep 29, 2009 5:01 pm

Thanks for that quick response Andy! I assume that I am just not knowledgeable of creating navigation bars using CSS. Because I don't understand the CSS that is used to format this navigation bar. Do you know of any turtorials that will help?
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Tue Sep 29, 2009 5:40 pm

one9ooh6 wrote:Do you know of any turtorials that will help?


Well, the first place any newb would go to would be W3 Schools.

I would also recommend that you check Sitepoint's CSS Reference pages, reading about the CSS concept as well as looking at various selectors and properties.
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Tue Oct 13, 2009 6:19 pm

Andy, thanks a million man, I figured out how to style that navigation bar. However, the drop down menu doesn't appear in IE7 or 8. I have use the IE7.js you recommended and I am still having problems. Can you look at this, http://www.elizapillars.org/leavesdew/index.html?
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
   

Re: Expandable Navigation Bar

Postby Andy » Tue Oct 13, 2009 6:48 pm

I have no idea why your page doesn't work and I don't really have time to find what's causing this misbehaviour but I know that the code I provided you above works. Anyway I got your menu working again by taking a different route and substituting left with margin-left instead:

Code: Select all
#navigation li ul { /* hide submenu */
   margin-left: -999em;
   position: absolute;
}
#navigation li:hover ul { margin-left: 0;  } /*show submenu */
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
Top
   
   

Re: Expandable Navigation Bar

Postby one9ooh6 » Tue Oct 13, 2009 9:35 pm

Thanks for your assistance Andy!
one9ooh6
Smashing <table>
 
Posts: 22
Joined: Mon Aug 24, 2009 11:24 am
Top
   
  Post a reply

Return to JavaScript & AJAX



Who is online

Users browsing this forum: No registered users and 1 guest