Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Striped responsive pull menu

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

    Default Striped responsive 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,808
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    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,208
    Thanks
    1
    Thanked 235 Times in 230 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; 07-17-2018 at 01:13 AM.
    ~ the original bald headed old fart ~

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

    Default

    Thanks guys, just started to play around with this menu instead :http://www.dynamicdrive.com/dynamici...-icon-menu.htm
    That works well, so I'm not going to break my head on this one no more.
    Thanks anyway!

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Hi there chechu,

    are you aware that the script of your choice does not have
    a fall-back for those users who have javascript disabled?

    And while I am here, have you noticed a solution has been
    posted to your other recent thread?...

    change image with non-conformistic forms

    coothead
    ~ the original bald headed old fart ~

  6. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    903
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    Are there people surfing the web having javascript disabled? Don't think they will have a good surfing experience, as most sites have js in it.
    The W3schools code didn't work on my mobile, but the DD one does.

    You can't code right for everyone, but I guess that DD menu is getting close to what I needed.

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Quote Originally Posted by chechu View Post
    ...but I guess that DD menu is getting close to what I needed.

    That old script can easily be done with CSS...

    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;
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #top,
    #close {
        position: fixed;
        top: 0.75em;
        right: 1em;	
        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;
        padding: 0 0.6em 0.18em;
     }
     
    #close::before {
        font-size: 2em;
        content: '\02a2f';
     }
     
    #nav {
        position: fixed;
        display: table;
        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 );
        transition: 0.75s ease-in-out;
     }
    
    #nav ul {
        display: table-cell;
        padding: 0;
        margin: 0 auto;
        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: 2s ease-in-out;
     }
     
    #nav:target {
        top: 0;
     }
    
    #nav:target ul a{
        color: #fff;
     }
    
    #content {
        max-width: 62.5em;
        padding: 3em 2em;
        margin: auto;
        background-color: #fff;
    }
    </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>
       
      <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>
      </div>
      
    </body>
    </html>

    coothead
    Last edited by coothead; 07-17-2018 at 02:39 PM.
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    903
    Thanks
    114
    Thanked 2 Times in 2 Posts

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,808
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Thanks Coothead, very nice.
    There might be a problem though. If the menu's content is such that the height of the menu exceeds the height of the window, the items at the bottom of the menu will be inaccessible. Do you have a CSS solution for that too?

  10. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Quote Originally Posted by molendijk View Post

    If the menu's content is such that the height of the menu
    exceeds the height of the window,the items at the bottom
    of the menu will be inaccessible.

    Do you have a CSS solution for that too?


    I certainly do.

    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;
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #top,
    #close {
        position: fixed;
        top: 1em;
        right: 1.5em;	
        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 {
        display: none;
        padding: 0 0.6em 0.18em;
     }
     
    #close::before {
        font-size: 2em;
        content: '\02a2f';
     }
     
    #nav {
        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: 1em 0;
        font-size: 1.5em;
        color: transparent;
        text-align: center;
        text-decoration: none;
        transition: 2s ease-in-out;
     }
     
    #nav:target {
        top: 0;
     }
    #nav:target #close{
        display: block;
     }
    
    #nav:target ul a{
        color: #fff;
     }
    
    #content {
        max-width: 62.5em;
        padding: 3em 2em;
        margin: auto;
        background-color: #fff;
    }
    </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>
         <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>
         <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>
         <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>
         <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>
         <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>
         <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>
         <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>
         <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>
      
    </body>
    </html>

    coothead
    Last edited by coothead; 07-18-2018 at 11:11 PM.
    ~ 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
  •