0

I am trying to create a simple navigation menu that when you click on one of the buttons, a secondary menu pops up below, but pushes the content below down with a sliding action.

There will be 6 buttons in the primary menu, spanning the width of the containing div at 960px. Then when you hover on "Products" only, every other primary button will go to a new page, this should open a secondary nav that spans 2 lines. Each button is 159px.

Here is my code:

HTML:

<div id="menu"> 
        <ul>
            <li><a href="index.html">About Us</a></li>
            <li id="products"><a href="#">Products</a></li>
            <li><a href="suppliers.html">Our Suppliers</a></li>
            <li><a href="findus.html">Find Us</a></li>
            <li><a href="deliveries.html">Deliveries</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>

     <div id="subMenu">
        <ul>
            <li><a href="winesandspirits.html">Wine &amp; Spirits</a></li>
            <li><a href="beersandciders.html">Beer &amp; Ciders</a></li>
            <li><a href="otherdrinks.html">Other Drinks</a></li>
            <li><a href="cheese.html">Cheese</a></li>
            <li><a href="meatsandpate.html">Meat &amp; Pate</a></li>
            <li><a href="vegetables.html">Vegetables</a></li>
            <li><a href="drystores.html">Dry Stores</a></li>
            <li><a href="honey.html">Honey &amp; Preserves</a></li>
            <li><a href="oliveoilandvinegar.html">Olive Oil &amp; Vinegar</a></li>
            <li><a href="sweetthings.html">Sweet Things</a></li>
            <li><a href="hampers.html">Hampers</a></li>
            <li><a href="accessories.html">Accessories</a></li>  
        </ul>
    </div>

     </div>

And my CSS:

#menu a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    letter-spacing: 1px;
    color: #fff;
    font-size: 12.5px;
    text-decoration: none;
    padding:0;
    margin: 0
}
#menu a:hover {
    color: #cff;
}
#menu {
    background: #689169;
    height:35px;
    width: 960px;
    transition:height 0.2s;
    -webkit-transition:height 0.2s;
}
#menu:hover {
    height: 105px;
}
#menu ul {
    padding: 0;
    margin: 0;
    position: absolute;
    list-style:none;
}
#menu ul li {
    float: left;
}
#menu ul li a {
    width: 159px;
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding: 10px; padding-right: 30px; padding-left: 30px;*/
    margin: 0;
    background: #689169;
    text-align: center;
    border-right: 1px solid #666;
    display:block;
}
#subMenu {
    position: absolute;
    z-index: 1;
    margin-top: 34px;
    width: 700px;
    height: 600px;
}
#subMenu ul {
    position: relative;
    float: left;
}
#subMenu ul li {
    clear: both;
    border-right: 1px solid #666
}
#subMenu ul li a {
    background: none;
    border: none;
}
#subMenu ul li a:hover {
    color: #fff;
}
#outset {
    width: 700px; height: 300px;
    background: #900;    
}

Here's my JSFiddle - http://jsfiddle.net/Jfdvr/1/ - please help!

Many thanks,

Matt

mattdbryce
  • 19
  • 6

1 Answers1

0

I would look into jQuery easing to bounce out a div with css display: hidden; So when a link is clicked the hidden div will ease out and then set a click anywhere else to revert to hidden

Adam 'Sacki' Sackfield
  • 594
  • 1
  • 4
  • 19
  • 1
    Hi Adam, thanks for your reply, but i'm unsure of the correct search terms for this, i've been looking all morning with no joy. Perhaps you could help me with an example of some code or a link to a page that might help. Thanks for your time. – mattdbryce Oct 13 '13 at 11:49
  • 1
    http://stackoverflow.com/questions/6121255/toggle-div-with-easing does this help? – Adam 'Sacki' Sackfield Oct 13 '13 at 12:05
  • @Adam'Sacki'Sackfield - This is not quite right, i'm after a hover state. so that when you hover on "Products" (see my jsfiddle) the secondary menu slides and pushes everything below it downwards. – mattdbryce Oct 13 '13 at 14:04
  • you can change the jquery event handler to hover rather than click to do the animation you require – Adam 'Sacki' Sackfield Oct 13 '13 at 14:05
  • http://jsfiddle.net/u7GX8/1004/ - I've changed the state to hover, but i need the the "some text here" box to be hidden and the when you hover on the button it appears. – mattdbryce Oct 13 '13 at 15:06
  • your almost there at this to the css and it will work mate. #mypage-info1 { display: none; } – Adam 'Sacki' Sackfield Oct 13 '13 at 15:10
  • Fantastic! Thanks bud, i'm gonna give this a go at formatting to my website, i'll let you know how i get on! – mattdbryce Oct 13 '13 at 15:13
  • http://jsfiddle.net/CrHxL/6/ - Could you please have a look at my code, i cant see where im going wrong, many thanks! – mattdbryce Oct 13 '13 at 16:13
  • Hey Adam, did you get a chance to look at this? I've been trying but i'm not getting anywhere, i'd really appreciate the help. Thanks a lot. – mattdbryce Oct 14 '13 at 11:40
  • Sorry been mad busy will have a look this evening and get back to you mate! – Adam 'Sacki' Sackfield Oct 14 '13 at 12:50
  • Thanks so much mate, really appreciate that! good luck with the work. – mattdbryce Oct 14 '13 at 13:03
  • I just copied your code from the jsfiddle into sublime text 3 and its working fine for me.If you send me your email add i can send you the files to check where yours may be going wrong. Firstly thou have you referenced to the jQuery library in a script tag before closing body tag(whether this ref is for the url or a link to file on your system). Then put the script in another file and ref this directly after? – Adam 'Sacki' Sackfield Oct 14 '13 at 17:57
  • @mattdbryce any luck? – Adam 'Sacki' Sackfield Oct 15 '13 at 17:01
  • Hi Adam, sorry for the delay in getting back to you! Work has been crazy, my email is mattdbryce@gmail.com. Thanks mate! – mattdbryce Oct 23 '13 at 21:30
  • Just sent them now not been on in a week or so – Adam 'Sacki' Sackfield Oct 28 '13 at 18:20