SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: hiding the menu

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    hiding the menu

    on http://purecss.io/ if you make the viewport narrow the left side menu will disappear.

    it still works with js off and i didn't find any media queries, so how do they do it?

    do you know of any tutorials on how to do it?

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In http://yui.yahooapis.com/pure/0.2.0/pure-min.css there are a number of @media(s)

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    it's minified maybe that's why i missed it, but i didn't see one for that feature.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your right minified make it extremely difficult

    there is a
    @media (max-width: 870px) .pure-menu-link {
    position: fixed;
    left: 0;
    display: block;
    }

    which shows the menu icon

    Its standard parameters are

    .pure-menu-link {
    display: none;
    top: 0;
    left: 150px;
    background: #000;
    background: rgba(0,0,0,0.7);
    padding: 0.75em 1em;
    }

    There is a

    #menu {
    margin-left: -150px;
    width: 150px;
    position: fixed;
    top: 0;
    left: 150px;
    bottom: 0;
    z-index: 1000;
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scroll: touch;
    }

    where

    @media (max-width: 870px) #menu {
    left: 0;
    }

    overrides the left attribute.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks for checking.

    are you seeing this code in http://yui.yahooapis.com/pure/0.2.0/pure-min.css?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's in baby-blue.css.

    Code:
    ....
    
    @media (max-width: 870px) {
    
        /* Navigation Push Styles */
        #layout {
            position: relative;
            padding-left: 0;
        }
            #layout.active {
                position: relative;
                left: 150px;
            }
                #layout.active #menu {
                    left: 150px;
                    width: 150px;
                }
    
        #menu {
            left: 0;
        }
    
        .pure-menu-link {
            position: fixed;
            left: 0;
            display: block;
        }
    
        #layout.active .pure-menu-link {
            left: 150px;
        }
    }
    
    @media (max-width: 767px) {
    
    etc..


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
  •