Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Striped responsive pull menu

  1. #11
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,801
    Thanks
    47
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Thanks Coothead.
    I noticed that opening your menu adds an entry to the browser's history. If you go back immediately by using the browser's back button, the menu closes again.
    This behavior causes problems in certain cases. For instance, if after opening your menu we go to another page (which may load as a response to a click on one of the menu links), and then go back again to your opened menu (by using the browser's history button) and finally close the menu by clicking on the close button, the 'other page' is removed from the history stack and cannot be reached any more.
    Also, I noticed that the animation is not absolutely smooth.

    This code does not have these problems.
    Last edited by molendijk; 07-18-2018 at 11:04 PM.

  2. #12
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,180
    Thanks
    1
    Thanked 231 Times in 226 Posts

    Default

    Hi there molendijk,

    I admire the way that you test code to destruction.

    This example addresses the points that your testing raised...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    
    html,body {
        height: 100%;
        margin: 0;
        box-sizing: border-box;
     }
     
    *,*::before, 
    *::after {
        box-sizing: inherit;
     }
     
    body {
        min-height: 100%;
        padding: 0.5em;
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #top,
    #close {
        position: fixed;
        top: 1em;
        right: 1.5em;	
        z-index: 1;
        padding: 0.5em;
        background-color: #000;
        border-radius: 0.3em;
        color: #fff;
        cursor: pointer;
        opacity: 1;
        transition: 0.75s ease-in-out; 
     }
    
    #top::before {
        font-size: 2em;
        content: '\02261';
     }
     
    #close {
        z-index:0;
        opacity: 0
     }
     
    #close::before {
        font-size: 2em;
        content: '\02a2f';
     }
     
    #nav {
        position: absolute;position: fixed;
        width: 100%;
        height: 100%;
        top: -100%;
        left: 0;
        padding: 3em 0 1em 0;
        border: 1px solid #999;
        background-color: #800;
        background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
        overflow: auto;
        transition: 0.75s ease-in-out;
     }
    
    #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        vertical-align: middle;
     }
     
    #nav li {
        float: left;
        width: 50%;
     }
     
    #nav ul a {
        display: block;
        margin: 0.5em 0;
        font-size: 1.25em;
        color: transparent;
        text-align: center;
        text-decoration: none;
        transition: 3s ease-in-out;
     }
     
    #nav ul li:nth-of-type(1) a,
    #nav ul li:nth-of-type(2) a  {
        font-style: oblique;
        text-decoration: underline;
     }
     
    input {
        position: absolute;
        left: -999em;
     }
    
    #r1:checked ~ #top{
        z-index: 0;
        opacity: 0;
     }
     
    #r1:checked ~ #nav {
        top: 0;
     }
     
    #r1:checked ~  #close{
        z-index: 1;
        opacity: 1;
     }
    
    #r1:checked ~ #nav ul a{
        color: #fff;
     }
     
    #r1:checked ~ #content{
        display: none;;
     }
     
    #content {
        max-width: 62.5em;
        padding: 3em 2em;
        margin: auto;
        border-radius: 0.75em;
        border: 1px solid #999;
        background-color: #fff;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
     }
    
    </style>
    
    </head>
    <body> 
    
    
       <input id="r1" name="r" type="radio"> 
      <label id="top" for="r1"></label>
        <input id="r2" name="r" type="radio"> 
    	    <label id="close" for="r2"></label>
      <div id="nav">
     
     
        <ul>
         <li><a href="https://duckduckgo.com/">Duck Duck</a></li>
         <li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
        </ul>
    
      </div>
      
      <div id="content">
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        Curabitur sit amet sem sed libero bibendum tempus faucibus       
        quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
        nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
        interdum justo ac justo vehicula consequat. Curabitur et 
        volutpat nibh. Phasellus rutrum lacus at dolor placerat 
        feugiat. Morbi porta, sapien nec molestie molestie, odio 
        magna vestibulum lorem, vitae feugiat est leo sit amet 
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
        magna sed, pretium commodo odio. Sed porttitor augue velit, 
        quis placerat diam sodales ac. Curabitur vitae porta ex. 
        Praesent rutrum ex fringilla tellus tincidunt interdum. 
        Proin molestie lectus consectetur purus aliquam porttitor. 
        Fusce ac nisi ac magna scelerisque finibus a vitae sem.
       </p><p>
        Donec vehicula diam non leo efficitur, id euismod odio 
        tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
        et libero non diam tempor sagittis. Quisque vel egestas 
        ipsum. Integer sed elit eu orci blandit commodo in in erat. 
        Donec blandit, mi at gravida varius, nulla tellus vulputate 
        ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
        penatibus et magnis dis parturient montes, nascetur ridiculus 
        mus. Curabitur tristique varius ullamcorper.
       </p>  
      </div> 
    </body>
    </html>
    As for your "Javascript" example, I still maintain that your
    coding methodology should take into account the needs of those
    whom, for whatever reason, choose not to use it.

    This is a guideline I find very useful to achieve that objective...

    Progressive enhancement:

    1. You write your page content as if both CSS and JavaScript are off.
    2. You write CSS to style the page the way you want it to look when
      JavaScript is off.
    3. You write additional CSS to change the way you want the page to
      look when JavaScript is turned on.
    4. You write CSS for the way you want the page to look when specific
      JavaScript commands are supported by the browser.
    5. You add a few lines of JavaScript to the head of the page to add
      the necessary classes to the html tag for the styles you wrote in
      steps 3 and 4 to be applied.

    coothead
    Last edited by coothead; Yesterday at 07:04 PM.
    ~ the original bald headed old fart ~

  3. The Following 2 Users Say Thank You to coothead For This Useful Post:

    chechu (07-19-2018),molendijk (07-19-2018)

  4. #13
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    902
    Thanks
    113
    Thanked 2 Times in 2 Posts

  5. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,801
    Thanks
    47
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Just for the fun of it and also a bit out of curiosity I made a 'Coothead like' right side pull menu (just css) and a 'Molendijk like' menu that uses a mixture of css and js. I was hoping that my code would require less lines than Coothead's menu (and thus would beat Coothead in terms of Ockham's razor principle), but in vain. Both solutions require approx. the same 'amount' of code. I find my code more intuitive though, but that's probably because I am more of a js-person than a css-person.
    Here's the css-only code:
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
     
    body {
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #top, #close {//position hamburger icon and close button;
        position: fixed;
        top: 10px;
        right: 17px;
        padding: 0.5em;
        background-color: #000;
        border-radius: 0.3em;
        color: #fff;
        cursor: pointer;
    
     }
    
    /* code for hamburger icon; */
    #top::before, #top::after {
        display: block;
        padding: 0.15em 0.75em;
        border-top: 0.2em solid #fff;
        border-bottom: 0.2em solid #fff;
        content: '';
     }
    #top::after {
        border-top: 0;
     }
    /* end code for hamburger icon; */
    
    /* code for close button; */ 
    #close {
        display: none;
        padding: 0 0.6em 0.18em;
     }
    #close::after {
        font-size: 2em;
        content: 'X';
     }
    /* end code for close button; */ 
     
    #nav {// code for menu;
    position: fixed;
    width: 50%;
    height: calc(100% - 65px);
    top:0;
    right: -100%;
    padding: 3em 0 1em 0;
    border: 1px solid #999;
    background-color: #800;
    background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
    overflow: auto;
    transition: 0.75s ease-in-out;
     }
    
    #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        vertical-align: middle;
     }
    #nav li {
        float: left;
        width: 50%;
     }
     
    #nav ul a {
        display: block;
        margin: 1em 0;
        font-size: 1.5em;
        color: transparent;
        text-align: center;
        text-decoration: none;
        transition: 3s ease-in-out;
     }
     
    #nav ul li:nth-of-type(1) a,
    #nav ul li:nth-of-type(2) a  {
        font-style: oblique;
        text-decoration: underline;
     }
     
    input {// checking invisible radio buttons is used for opening and closing the menu;
    display: none;
     }
     
    /* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu has 'right: 0'  */
    #radiobutton1:checked ~ #nav {
    right:0;
     }
     
    /* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu and the close button have 'display: block'  */
    #radiobutton1:checked ~ #nav #close{
        display: block; 
     }
    
    /* when the first radio button (hidden) is checked via a click on the hambuger icon, the links in the menu have 'color: #fff'  */
    #radiobutton1:checked ~ #nav ul a{
        color: #fff;
     }
     
    #content {
    max-width: 62.5em;
    padding: 3em 2em;
    margin: auto;
    border-radius: 0.75em;
    border: 1px solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    }
    
    </style>
    
    </head>
    <body> 
    
    <!-- Clicking on a label will toggle a checkbox -->
      <label id="top" for="radiobutton1"></label>
       <input id="radiobutton1" name="toggle_menu"  type="radio"> 
     
    <!-- Clicking on a label will toggle a checkbox -->
      <div id="nav">
       <label id="close" for="radiobutton2"></label>
        <input id="radiobutton2" name="toggle_menu" type="radio">  
     
        <ul>
         <li><a href="https://duckduckgo.com/">Duck Duck</a></li>
         <li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
        </ul>
    
      </div>
      
      <div id="content">
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        Curabitur sit amet sem sed libero bibendum tempus faucibus       
        quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
        nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
        interdum justo ac justo vehicula consequat. Curabitur et 
        volutpat nibh. Phasellus rutrum lacus at dolor placerat 
        feugiat. Morbi porta, sapien nec molestie molestie, odio 
        magna vestibulum lorem, vitae feugiat est leo sit amet 
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
        magna sed, pretium commodo odio. Sed porttitor augue velit, 
        quis placerat diam sodales ac. Curabitur vitae porta ex. 
        Praesent rutrum ex fringilla tellus tincidunt interdum. 
        Proin molestie lectus consectetur purus aliquam porttitor. 
        Fusce ac nisi ac magna scelerisque finibus a vitae sem.
       </p><p>
        Donec vehicula diam non leo efficitur, id euismod odio 
        tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
        et libero non diam tempor sagittis. Quisque vel egestas 
        ipsum. Integer sed elit eu orci blandit commodo in in erat. 
        Donec blandit, mi at gravida varius, nulla tellus vulputate 
        ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
        penatibus et magnis dis parturient montes, nascetur ridiculus 
        mus. Curabitur tristique varius ullamcorper.
       </p>  
      </div> 
    </body>
    </html>
    And here's my own code:
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
     
    body {
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
    }
     
    #nav {
    position: fixed;
    width: 0;
    height: calc(100% - 65px);
    top:0;
    right:0;
    padding: 3em 0 1em 0;
    border: 1px solid #999;
    background-color: #800;
    background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
    overflow: auto;
    transition: 0.75s ease-in-out;
    }
    
    #top, #close {
    position: fixed; 
    top: 1px; 
    right: 3px;
    color: #fff; 
    cursor: pointer;
    font-family: arial; 
    font-size: 36px;
    }
    
    #top {
    padding: 0.2em;    
    background-color: #000; 
    border-radius: 0.1em; 
    }
    
    #close {
    padding: 0.5em; 
    padding-top: 0.2em;
    visibility: hidden; 
    opacity: 0;
    transition: 0.75s ease-in-out;
    }
    
    #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    vertical-align: middle;
    }
    #nav li {
    float: left;
    width: 50%;
    }
     
    #nav ul a {
    display: block;
    margin: 1em 0;
    font-size: 1.5em;
    color: white;
    text-align: center;
    text-decoration: none;
    }
     
    #nav ul li:nth-of-type(1) a,
    #nav ul li:nth-of-type(2) a  {
    font-style: oblique;
    text-decoration: underline;
    }
    
    #content {
    max-width: 62.5em;
    padding: 3em 2em;
    margin: auto;
    border-radius: 0.75em;
    border: 1px solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    }
     
    </style>
    
    <script>
    function open_nav()
    {
    document.getElementById('close').style.opacity=1; 
    document.getElementById('close').style.visibility='visible';  
    document.getElementById('nav').style.width='50%';
    }
    function close_nav()
    {
    document.getElementById('close').style.opacity=0; 
    document.getElementById('close').style.visibility='hidden';  
    document.getElementById('nav').style.width=0;
    }
    </script>
    
    </head>
    
    <body>
    <div id="top" onclick="open_nav()">&#x02261;</div> 
    <div id="nav">
    <div id="close" onclick="close_nav()">X</div>  
    <ul>
    <li><a href="https://duckduckgo.com/">Duck Duck</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Service</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Service</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Service</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
      
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Curabitur sit amet sem sed libero bibendum tempus faucibus       
    quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
    nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
    interdum justo ac justo vehicula consequat. Curabitur et 
    volutpat nibh. Phasellus rutrum lacus at dolor placerat 
    feugiat. Morbi porta, sapien nec molestie molestie, odio 
    magna vestibulum lorem, vitae feugiat est leo sit amet 
    nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
    magna sed, pretium commodo odio. Sed porttitor augue velit, 
    quis placerat diam sodales ac. Curabitur vitae porta ex. 
    Praesent rutrum ex fringilla tellus tincidunt interdum. 
    Proin molestie lectus consectetur purus aliquam porttitor. 
    Fusce ac nisi ac magna scelerisque finibus a vitae sem.
    </p>
    <p>
    Donec vehicula diam non leo efficitur, id euismod odio 
    tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
    et libero non diam tempor sagittis. Quisque vel egestas 
    ipsum. Integer sed elit eu orci blandit commodo in in erat. 
    Donec blandit, mi at gravida varius, nulla tellus vulputate 
    ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus 
    mus. Curabitur tristique varius ullamcorper.
    </p>  
    </div> 
    
    </body>
    </html>
    EDIT: I forgot that chechu's main concern was to have a responsive menu. There are several ways to obtain this in the above codes. For ex. we could replace all instances of '50%' with '100%'.
    Last edited by molendijk; 07-19-2018 at 10:08 PM. Reason: Correction

  6. #15
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,180
    Thanks
    1
    Thanked 231 Times in 226 Posts

    Default

    Quote Originally Posted by molendijk View Post
    EDIT: I forgot that chechu's main concern was to have a responsive menu.
    There are several ways to obtain this in the above codes.
    For ex. we could replace all instances of '50%' with '100%'.

    You really need to use "media queries" to make your code responsive.

    coothead
    ~ the original bald headed old fart ~

  7. #16
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,801
    Thanks
    47
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Quote Originally Posted by coothead View Post

    You really need to use "media queries" to make your code responsive.
    Of course we need media queries. I use them all the time. Maybe I should have said: we could replace all instances of '50%' with '100%' for certain screen widths.
    This being said, let me come back to the css-js debate. I agree that css should be used for all specific cases where it is as powerful as js. But there are many situations where css alone can't do the job, see this menu, for instance.

  8. #17
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,180
    Thanks
    1
    Thanked 231 Times in 226 Posts

    Default

    Quote Originally Posted by molendijk View Post
    But there are many situations where CSS alone can't do the job,
    see this menu, for instance.

    Oh ye of little faith, for your instance, CSS can certainly do the job.


    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    
    html,body {
        height: 100%;
        margin: 0;
        box-sizing: border-box;
     }
     
    *,*::before, 
    *::after {
        box-sizing: inherit;
     }
     
    body {
        padding: 0.5em;
        overflow-x: hidden;
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #top,
    #close {
        position: fixed;
        top: 1em;
        right: 1.5em;
        z-index: 1; 	
        padding: 0.5em;
        background-color: #000;
        border-radius: 0.5em;
        color: #fff;
        cursor: pointer;
        transition: 1.5s ease-in-out; 
     }
    
    #top::before {
        font-size: 2em;
        content: '\02261';
     }
     
    #close {
        z-index: 0;
        opacity: 0;
     }
     
    #close::before {
        font-size: 2em;
        content: '\02a2f';
     }
     
    #nav {
        position: absolute;
        width: 100%;
        min-height: 100%;
        top: 0;
        right: -100%;
        padding: 3em 0 1em 0;
        border: 1px solid #999;
        background-color: #808080;
        background-image: linear-gradient( to bottom, #000, #808080 55%, #c0c0c0 );
        transition: 1s ease-in-out;
     }
    
    #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        vertical-align: middle;
     }
     
    #nav li {
        float: left;
        width: 50%;
     }
     
    #nav ul a {
        display: block;
        margin: 0.5em 0;
        font-size: 1.25em;
        color: transparent;
        text-align: center;
        text-decoration: none;
        transition: 1.5s ease-in-out;
     }
     
    input {
        position: absolute;
        left: -999em;
     }
     
    #r1:checked ~ #top{
        z-index: 0;
     }
     
    #r1:checked ~ #nav {
        right: 0;
     }
     
    #r1:checked ~  #nav #close{
        background-color: #f0f0f0;
        color: #000;
        opacity: 1;
     }
    
    #r1:checked ~ #nav ul a {
        color: #fff;
     }
     
    #r1:checked ~ #content{
        display: none;;
     }
     
    #content {
        max-width: 62.5em;
        padding: 3em 2em;
        margin: auto;
        border-radius: 0.75em;
        border: 1px solid #999;
        background-color: #fff;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
     }
    
    </style>
    
    </head>
    <body> 
    
     <input id="r1" name="r" type="radio"> 
     <label id="top" for="r1"></label>
     	
      <div id="nav">
       <input id="r2" name="r" type="radio">
       <label id="close" for="r2"></label>
        <ul>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="services.html">Service</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="people.html">People</a></li>
         <li><a href="blog.html">Blog</a></li>
         <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      
      <div id="content">
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        Curabitur sit amet sem sed libero bibendum tempus faucibus       
        quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
        nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
        interdum justo ac justo vehicula consequat. Curabitur et 
        volutpat nibh. Phasellus rutrum lacus at dolor placerat 
        feugiat. Morbi porta, sapien nec molestie molestie, odio 
        magna vestibulum lorem, vitae feugiat est leo sit amet 
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
        magna sed, pretium commodo odio. Sed porttitor augue velit, 
        quis placerat diam sodales ac. Curabitur vitae porta ex. 
        Praesent rutrum ex fringilla tellus tincidunt interdum. 
        Proin molestie lectus consectetur purus aliquam porttitor. 
        Fusce ac nisi ac magna scelerisque finibus a vitae sem.
       </p><p>
        Donec vehicula diam non leo efficitur, id euismod odio 
        tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
        et libero non diam tempor sagittis. Quisque vel egestas 
        ipsum. Integer sed elit eu orci blandit commodo in in erat. 
        Donec blandit, mi at gravida varius, nulla tellus vulputate 
        ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
        penatibus et magnis dis parturient montes, nascetur ridiculus 
        mus. Curabitur tristique varius ullamcorper.
       </p>  
      </div> 
      
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  9. #18
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,801
    Thanks
    47
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Quote Originally Posted by coothead View Post
    Oh ye of little faith...
    Wherfore yf God so cloth the grasse, yt is to daye in ye felde, and tomorow shalbe cast in to the fornace, how moch more shal he clothe you, o ye of litle faith?

    Quote Originally Posted by coothead View Post
    CSS can certainly do the job.
    Your code seems clever enough! This line: #r1:checked ~ #content{display: none;} seems crucial. It hides the windows's scrollbar when the menu button is clicked on, so it ensures that the scrollbar we see when the window is small enough is the menu's scrollbar.

    But now let's make the width of the navigation menu a bit smaller, say 70%: #nav {width: 70%}. Now your code has a problem, because the user will wonder where the page's content has gone and the page looks ugly.

    This problems does not present itself when my code is used.

  10. #19
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,180
    Thanks
    1
    Thanked 231 Times in 226 Posts

    Default

    Hi there Arie,

    why do you keep moving the goal posts?

    I have no problem with your desire to use "JavaScript", as long as your use of
    it meets the "Progressive enhancement" guidelines that I indicated in post #12.

    Your code does not.

    This means that with "JavaScript" disabled this menu, unfortunately, does not
    appear to have one.

    coothead
    ~ the original bald headed old fart ~

  11. #20
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,801
    Thanks
    47
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    That's true, although not an issue since most people don't have javascript disabled..
    It's just that your css-solutions surprised me all the time (in a positive sense) and I wondered how far you could go on the css-road.
    So I thought that my previous post would either yield another interestig css-code on your part or lead to the conclusion that yes, sometimes, css 'can't do it'.
    As I am not a dogmatic person, I had no desire at all to 'defend' javascript against css. That would be stupid. If that's what you thought, I'm sorry.

Similar Threads

  1. Pull down menu help
    By scubabert in forum JavaScript
    Replies: 0
    Last Post: 12-20-2007, 02:53 PM
  2. Replies: 3
    Last Post: 06-11-2007, 08:46 AM
  3. Pull Down Menu
    By vikysaran in forum Looking for such a script or service
    Replies: 0
    Last Post: 05-23-2007, 07:07 AM
  4. Pull Down Menu
    By mturus in forum JavaScript
    Replies: 0
    Last Post: 10-28-2006, 11:59 PM
  5. Colour Pull Down Menu
    By gold2040 in forum JavaScript
    Replies: 0
    Last Post: 05-27-2005, 05:05 PM

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
  •