Menu

[narian]

I have searched all over the web for a menu that would do what I want but i can't find one anywhere, what i need it to do is when you click certain links it will drag the links below it down and reveal other links, can you give me a code to do this or possibly a site?


ty verry much, sry if im a bit hard to understand

[jberry]

This would have to be done with css it is the easiest way thsi is a sample code to bascially do whatyou want it is a little long but it is the best way

Code: Select all

#globalnav {
   position:relative;
   float:left;
   width:100%;
   padding:0 0 1.75em 1em;
   margin:0;
   list-style:none;
   line-height:1em;
}

#globalnav LI {
   float:left;
   margin:0;
   padding:0;
}

#globalnav A {
   display:block;
   color:#444;
   text-decoration:none;
   font-weight:bold;
   background:#ddd;
   margin:0;
   padding:0.25em 1em;
   border-left:1px solid #fff;
   border-top:1px solid #fff;
   border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
   background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
   position:relative;
   z-index:102;
}

/*subnav*/

#globalnav UL {
   position:absolute;
   left:0;
   top:1.5em;
   float:left;
   background:#bbb;
   width:100%;
   margin:0;
   padding:0.25em 0.25em 0.25em 1em;
   list-style:none;
   border-top:1px solid #fff;
}

#globalnav UL LI {
   float:left;
   display:block;
   margin-top:1px;
}

#globalnav UL A {
   background:#bbb;
   color:#fff;
   display:inline;
   margin:0;
   padding:0 1em;
   border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
   color:#444;
}

that is the css and this is what the html would be for this example.

Code: Select all

<ul id="globalnav">
  <li><a href="#">Home</a></li>
  <li><a href="#" class="here">About</a>
    <ul>
      <li><a href="#">Vision</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Culture</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#" class="here">History</a></li>
      <li><a href="#">Sponsorship</a></li>
    </ul>
  </li>
  <li><a href="#">News</a></li>
  <li><a href="#">Proof</a></li>
  <li><a href="#">Process</a></li>
  <li><a href="#">Expertise</a></li>
  <li><a href="#">Help</a></li>
</ul>

i hope this helps

[narian]

sry im such a noob, what do i do with the css lol

[jberry]

First are you by any chance using Dreamweaver because if you are then this would be easy.

[narian]

I just got dreamweaver and started using it yesterday.

[jberry]

CSS is Cascading Style Sheets it help style your page instead off using tables. In a nut shell I am going to send you this link
http://acc.shoreconnection.com/jberry/tabs/page1.html#
I made the nav bar you are looking for. and then if you click on About it does the subNavbar.
you can view the source on each page(the code) by going to view>source or view source. The CSS is a seperate file you will see in the code

Code: Select all

style type="text/css" media="all">
@import "nav.css";

this is how you get the CSS in your file. If you go to this link it will show you what the CSS is. http://acc.shoreconnection.com/jberry/tabs/nav.css
if you were to use this you have to save it as a style sheet in dreamweaver it gives the the option. file > save as> and the drop down says stylesheets (.css) what ever you name it you will have to change it in the code where it says @import "_.css"; put the file name there. Ihope this helps but it hard to teach CSS this way but it will give you a start play with the code use the code and good luck and more questions feel free to PM me or post more.
[/code]

[narian]

Ty