SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    110
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Mobile CSS Drop Down Navigation

    Hi there.

    I'm trying to create a mobile navigation bar that has a drop down menu. I have most of it set up already, but the only sub-menu link I can view is from the last main menu button, the other sub-menu button hides behind the main navigation. It might be a simple fix.

    Here's the link, I set it up so that the mobile side is viewable from your browser. The CSS is also temporarily included in the main HTML document:
    http://www.louieswebsite.com/test/

    Both the LOGIN and REGISTER buttons have a sub-menu button, but the one for LOGIN is not visible on roll-over.

    Thank you.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Best guess:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <title>dropdown menu</title>
        <style>
    
    ul {
        list-style-type:none;
        background-color:#000;
        padding:0;
        margin:0;
    }
    li {
        position:relative;
        font-family:Arial,Helvetica,sans-serif;
        font-weight:600;
        text-transform:uppercase;
        margin-left:0px;
    }
    
    ul.top_nav {
        border-top:1px solid #fff;
        position:relative;
        padding:0;
        margin-left:0px;
    }
    ul.top_nav li {
        border-bottom:1px solid #000;
        border-right:9px solid #000;
    }
    ul.dropdown {
        display:none;
        position:absolute;
        top:30px;
        left:0;
        width:100px;  /* ? */
    }
    li:hover ul.dropdown {
        display:block;
    }
    
    ul.dropdown li {
        z-index:1;
        margin-left:0px;
    }
    a {
        display:block;
        border-left:9px solid #000;
        border-top:1px solid #000;
        background:#000;
        color:#ecf873;
        text-decoration:none;
        padding:5px;
    }
    a:hover {
        text-decoration:none;
        color:#000;
        background:#ecf873;
    }
    
        </style>
    </head>
    <body>
    
    <ul class="top_nav">
        <li><a href="#">Exchange</a></li>
        <li><a href="#">Login</a>
            <ul class="dropdown">
                <li><a href="#">Help</a></li>
            </ul>
        </li>
        <li><a href="#">Register</a>
            <ul class="dropdown">
                <li><a href="#">Help</a></li>
                <li><a href="#">Yeah</a></li>
            </ul>
        </li>
    </ul>
    
    <!--
    <ul class="dropdown">
        <li><a href="#">Help</a>
    </ul>
    -->
    
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hover navigation sucks on mobile, if it works at all (once you touch a hover menu, you can't get rid of it again). You are better off trying something like these:

    http://responsivenavigation.net/examples/multi-toggle/

    http://responsive-nav.com/

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    110
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I managed to achieve this a different way by using a style from this website: http://astuteo.com/mobilemenu and went with @media only screen and (min-width: 480px) { } in CSS for the full screen browser.

    Thanks anyway.


Bookmarks

Posting Permissions

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