Page 3 of 3 FirstFirst 123
Results 21 to 23 of 23

Thread: Striped responsive pull menu

  1. #21
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,182
    Thanks
    1
    Thanked 232 Times in 227 Posts

    Default

    Hi there Arie,

    I am sorry that I was unable to reply to your post earlier;
    unfortunately I lost internet connection until 11am today.

    Your moving of the goal posts does not aggravate me, on the
    contrary it actually helps me improve my CSS skills.

    Here is my amended code that that seems to address the problem
    that was presented by your new goal post position...

    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 {
        overflow-x: hidden;
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #wrapper {
        position: relative;
        min-height: 100%; 
        padding: 4.25em 0.5em 0.5em;
     }
     
    #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;
        top: 0;
        right: -100%;
        width: 100%; width:50%; /* Arie's latest goal post position */
        height: 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;
     }
    
    #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 );
     }
     
    @media ( max-width: 30em ) {
    #nav li {
        float: none;
        width: 100%;
      }
     }
     
    @media ( max-width: 20em ) {
    #nav {
        width: 100%;
      }
     }
    </style>
    
    </head>
    <body>
     
     <div id="wrapper">
     
      <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> 
      
    <!-- #wrapper --></div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  2. The Following User Says Thank You to coothead For This Useful Post:

    molendijk (Today)

  3. #22
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,802
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Thanks very much Coothead, that's fantastic. I thought this couldn't be done with css alone, but you proved it's possible.

  4. #23
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,182
    Thanks
    1
    Thanked 232 Times in 227 Posts

    Default


    No problem, you're very welcome.

    Thank you for pushing me along.

    CSS has really moved forward with the introduction of CSS3

    coothead
    ~ the original bald headed old fart ~

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
  •