Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Hide/Show div navbar drop down


    Hello there! I am attempting to code a drop down for a navbar using a show/hide style method.

    My Code-

    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Cars</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Deals</a></li>
    <hr width="900px">
    <div id="dropdown">
    <ul>
    <li><a href="#">Supermini's</a></li>
    <li><a href="#">Hatchbacks</a></li>
    <li><a href="#">Coupe's</a></li>
    <li><a href="#">Convertable's</a></li>
    <li><a href="#">Luxary Cars</a></li>
    </ul>

    <ul>
    <li><a href="#">Estate's</a></li>
    <li><a href="#">4x4s</a></li>
    <li><a href="#">All Terrain</a></li>
    <li><a href="#">Vans</a></li>
    <li><a href="#">Motocycles</a></li>
    </ul>
    </div>
    </ul>
    </div>

    My CSS-

    #nav {
    margin:5px 0 15px 0;
    font-family:'Days One', sans-serif;
    }
    #nav ul
    { list-style:none;
    margin:0;
    padding:0px 30px;
    text-align:center;
    }
    #nav ul li {
    display:inline-block;
    }
    #nav ul li a {
    color:#fff;
    text-decoration:none;
    padding:10px 20px;
    display:inline-block;
    }
    #nav ul li a:hover {
    color:#3399FF;
    }

    I would prefer a pure CSS style dropdown, but I am happy with jquery or javascript.
    Thank you for your help.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    i thought this nice tutorial from Ralph Phillips http://www.ralphphillips.com/tutorials/ may be what you're looking for plus i fiddled with your html:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    *{margin:0px;
    padding:0px;}
    
    body{
    font-family:verdana;
    background-color:#ABC;
    padding:50px;
    }
    h1{
    text-align:center;
    border-bottom:2px solid #009;
    margin-bottom:50px;
    }
    
    /*navigation menu*/
    /*=========================================================*/
    
    ul#nav, ul.sub1, ul.sub2{
    list-style-type:none;
    
    }
    ul#nav li{
    width:125px;
    text-align:center;
    position:relative;
    float:left;
    margin-right:4px;
    }
    
    ul#nav a{
    text-decoration:none;
    display:block;
    width:125px;
    height:25px;
    line-height:25px;
    background-color:#FFF;
    border:1px solid #CCC;
    border-radius:5px;
    }
    
    ul#nav .sub1 a, .sub2 a{
    margin-top:3px;
    }
    
    ul#nav li:hover>a{
    background-color:#6699FF;
    }
    
    ul#nav li:hover a:hover{
    background-color:lavender;
    }
    
    ul#nav ul.sub1, ul.sub2{
    display:none;
    position:absolute;
    top:26px;
    left:0px;
    }
    
    ul#nav li:hover .sub1{
    display:block;
    }
    ul#nav li:hover .sub2{
    display:block;
    }
    
    </style>
    
    
    </head>
    <body>
    <h1>CSS Navigation</h1>
    
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul class="sub1">
           <li><a href="#">More About 1</a></li>
           <li><a href="#">More About 2</a></li>
           <li><a href="#">More About 3</a></li>
        </ul>
    </li>
    <li><a href="#">Cars</a>
        <ul class="sub2">
           <li><a href="#">Supermini's</a></li>
           <li><a href="#">Hatchbacks</a></li>
           <li><a href="#">Coupe's</a></li>
           <li><a href="#">Convertable's</a></li>
           <li><a href="#">Luxary Cars</a></li>
           <li><a href="#">Coupe's</a></li>
           <li><a href="#">4x4s</a></li>
           <li><a href="#">All Terrain</a></li>
           <li><a href="#">Vans</a></li>
           <li><a href="#">Motocycles</a></li>
    
        </ul>
    </li>
    <li><a href="#">Deals</a></li>
    <li><a href="#">Estate's</a></li>
    <li><a href="#">Contact</a></li>
    
    </ul>
    
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response! Unfortunately that is not the style drop down I am looking for. If you take a look at this link ( http://gyazo.com/9d1a9fad664a7a553f54d28a44e4801a ) it may help you to understand what I am trying to achieve. The section below the line I would like to be hidden until the "cars" link (Top row of nav bar) is hovered over or clicked.
    Many Thanks
    -James

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Does this version work better for you?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    *{margin:0px;
    padding:0px;}
    
    body{
    font-family:verdana;
    background-color:#ABC;
    padding:50px;
    }
    h1{
    text-align:center;
    border-bottom:2px solid #009;
    margin-bottom:50px;
    }
    
    /*navigation menu*/
    /*=========================================================*/
    
    ul#nav, ul.sub1, ul.sub2{
    list-style-type:none;
    
    }
    ul#nav li{
    width:125px;
    text-align:center;
    position:relative;
    float:left;
    margin-right:4px;
    }
    
    ul#nav a{
    text-decoration:none;
    display:block;
    width:125px;
    height:25px;
    line-height:25px;
    background-color:#FFF;
    border:1px solid #CCC;
    border-radius:5px;
    }
    
    ul#nav .sub1 a, .sub2 a{
    margin-top:3px;
    }
    
    ul#nav li:hover>a{
    background-color:#6699FF;
    }
    
    ul#nav li:hover a:hover{
    background-color:lavender;
    }
    
    ul#nav ul.sub1, ul.sub2{
    display:none;
    position:absolute;
    top:26px;
    left:0px;
    }
    
    ul#nav li:hover .sub1{
    display:block;
    }
    ul#nav li:hover .sub2{
    display:block;
    }
    
    .shift{
    display:inline;
    width:700px;
    }
    
    ul#nav ul.sub2{
    display:none;
    position:absolute;
    top:26px;
    left:-257px;
    
    }
    
    </style>
    
    
    </head>
    <body>
    <h1>CSS Navigation</h1>
    
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul class="sub1">
           <li><a href="#">More About 1</a></li>
           <li><a href="#">More About 2</a></li>
           <li><a href="#">More About 3</a></li>
        </ul>
    </li>
    <li><a href="#">Cars</a>
        <ul class="sub2 shift">
           <li><a href="#">Supermini's</a></li>
           <li><a href="#">Hatchbacks</a></li>
           <li><a href="#">Coupe's</a></li>
           <li><a href="#">Convertable's</a></li>
           <li><a href="#">Luxary Cars</a></li>
           <li><a href="#">Coupe's</a></li>
           <li><a href="#">4x4s</a></li>
           <li><a href="#">All Terrain</a></li>
           <li><a href="#">Vans</a></li>
           <li><a href="#">Motocycles</a></li>
    
        </ul>
    </li>
    <li><a href="#">Deals</a></li>
    <li><a href="#">Estate's</a></li>
    <li><a href="#">Contact</a></li>
    
    </ul>
    
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •