Results 1 to 3 of 3

Thread: Striped responsice pull menu

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

    Default Striped responsice pull menu

    Hey all,

    As I would love to get this type of menu:, I was searching around and found this:
    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.

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

  2. #2
    Join Date
    Sep 2007
    The Netherlands
    Thanked 237 Times in 230 Posts
    Blog Entries


    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
    chertsey, a small town 25 miles south west of london, england.
    Thanked 229 Times in 225 Posts


    Hi there chechu,

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

    <html lang="en">
    <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;
    *::after {
        box-sizing: inherit;
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
    #close {
        position: fixed;
        display: inline-block;
        padding: 0.5em;
        background-color: #000;
        border-radius: 0.3em;
        color: #fff;
        text-decoration: none;
    #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;
     <a id="top" href="#nav"></a>
      <div id="nav">
       <a id="close" href="#top"></a>
         <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>

    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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts