Results 1 to 3 of 3

Thread: Striped responsice pull menu

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    894
    Thanks
    112
    Thanked 2 Times in 2 Posts

    Default Striped responsice pull menu

    Hey all,

    As I would love to get this type of menu: http://www.themezaa.com/html/brando/architecture.html#, I was searching around and found this: https://www.w3schools.com/howto/tryi...how_js_sidenav.
    Also nice, but it is not responsive.

    So, hence my question: who can help me out finding the code of the first link's menu, please?
    Or make the second link responsive?
    EDIT: second link is not only not responsive, the js is not working on mobile.

    Thanks.
    Last edited by chechu; 07-11-2018 at 10:31 PM.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,795
    Thanks
    46
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Why do you say that the w3schools-menu is not responsive? The only problem I can see is that the close button is not visible anymore when the window gets very small, but that's because the demo is in a separate iframe whose width is only 50% of the window's width. There's no issue when the menu is placed in a main window.
    This might also be helpful.

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,162
    Thanks
    1
    Thanked 229 Times in 225 Posts

    Default

    Hi there chechu,

    here is a CSS example for you to try...

    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 {
        box-sizing: border-box;
     }
     
    *,*::before, 
    *::after {
        box-sizing: inherit;
     }
     
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    
    #top,
    #close {
        position: fixed;
        display: inline-block;
        padding: 0.5em;
        background-color: #000;
        border-radius: 0.3em;
        color: #fff;
        text-decoration: none;
     }
    
    #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;
     }
     
    #close {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        padding: 0 0.6em 0.18em;
     }
     
    #close::before {
        font-size: 2em;
        content: '\02a2f';
     }
     
    #nav {
        position: fixed;
        width: 94%;
        max-width: 18em;
        top: 0;
        left: -18.5em;
        padding: 3em 0 1em 0;
        border: 1px solid #999;
        background-color: #fff;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
        transition: 0.75s ease-in-out;
     }
    
    #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
     }
     
    #nav ul a {
        display: block;
        margin: 0.25em 0;
        color: #000;
        text-indent: 1em;
        text-decoration: none;
     }
    
    #nav:target {
        left: 0;
     }
    
    </style>
    
    </head>
    <body> 
    
     <a id="top" href="#nav"></a>
     
      <div id="nav">
      
       <a id="close" href="#top"></a>
       
        <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>
        </ul>
    	
       </div>
    
    </body>
    </html>

    coothead
    Last edited by coothead; Today at 01:13 AM.
    ~ the original bald headed old fart ~

Similar Threads

  1. Static Menu script.... need pull out feature
    By develonet in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-15-2008, 10:47 AM
  2. Pull down menu help
    By scubabert in forum JavaScript
    Replies: 0
    Last Post: 12-20-2007, 02:53 PM
  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
  •