1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Menu Problem

Discussion in 'HTML & Website Design' started by upetrovic, Jul 25, 2017.

  1. #1
    sl1.png When I go on page ( display is more than 680px)
    sl2.png Display is less then 680px
    sl3.png Button click (1st time)
    sl2.png Button click (2nd time)
    Screenshot_3.png And here problem starts, menu is gone when display is 680px

    HTML file
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="probniStyle.css">
    </head>
    <body>

    <div class="header">
    <h1>Title</h1>
    <div class="navigation">
    <button class="menuButton" onclick="menuFunction()">Menu</button>
    <nav id="nav">
    <li><a href="#">Hyperlink</a></li>
    <li><a href="#">Hyperlink</a></li>
    <li><a href="#">Hyperlink</a></li>
    <li><a href="#">Hyperlink</a></li>
    <li><a href="#">Hyperlink</a></li>
    </nav>
    </div>
    </div>

    <script type="text/javascript">

    function menuFunction() {
    var dis = document.getElementById("nav");

    if(dis.style.display == "flex") {
    dis.style.display = "none";
    } else {
    dis.style.display = "flex";
    }
    }

    </script>

    </body>
    </html>

    CSS file

    * { margin: 0px; padding: 0px; }
    SEMrush
    body {
    font-family: Arial;
    color: #FFF;
    }
    a {
    text-decoration: none;
    color: #FFF;
    }
    li {
    list-style: none;
    }
    .menuButton {
    display: none;
    padding: 6px;
    font-size: 23px;
    border: none;
    }

    .header {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #066;
    }
    .navigation {
    display: flex;
    justify-content: center;
    }
    h1 { padding: 4px; }

    nav { display: flex; }
    nav a {
    display: block;
    padding: 8px;
    transition: background-color 200ms ease;
    }
    nav a:hover {
    background-color: #076;
    }

    @media only screen and (max-width: 680px)
    {
    div.header div.navigation {
    flex-direction: column;
    }
    div.header div.navigation nav {
    display: none;
    flex-direction: column;
    }
    div.header div.navigation nav a {
    width: 100%;
    }
    .menuButton {
    display: block;
    cursor: pointer;
    background-color: #066; color: #FFF;
    transition: background-color 180ms ease;
    }
    .menuButton:hover {
    background-color: #076;
    }
    }
     
    upetrovic, Jul 25, 2017 IP
    SEMrush
  2. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #2
    Please use code tag and:
    
    <link rel="stylesheet" type="text/css" href="probniStyle.css">
    HTML:
    What's in there?
     
    Blank ™, Jul 25, 2017 IP
  3. upetrovic

    upetrovic Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    CSS file -- probniStyle.css --

    * { margin: 0px; padding: 0px; }

    body {
    font-family: Arial;
    color: #FFF;
    }
    a {
    text-decoration: none;
    color: #FFF;
    }
    li {
    list-style: none;
    }
    .menuButton {
    display: none;
    padding: 6px;
    font-size: 23px;
    border: none;
    }

    .header {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #066;
    }
    .navigation {
    display: flex;
    justify-content: center;
    }
    h1 { padding: 4px; }

    nav { display: flex; }
    nav a {
    display: block;
    padding: 8px;
    transition: background-color 200ms ease;
    }
    nav a:hover {
    background-color: #076;
    }

    @media only screen and (max-width: 680px)
    {
    div.header div.navigation {
    flex-direction: column;
    }
    div.header div.navigation nav {
    display: none;
    flex-direction: column;
    }
    div.header div.navigation nav a {
    width: 100%;
    }
    .menuButton {
    display: block;
    cursor: pointer;
    background-color: #066; color: #FFF;
    transition: background-color 180ms ease;
    }
    .menuButton:hover {
    background-color: #076;
    }
    }
     
    upetrovic, Jul 25, 2017 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Seriously? "Please use code-tag" - learn how to forum, please?
    First, why in all that is holy do you use javascript for this function? Making a menu drop down / resize / redisplay is HTML / CSS-work, not javascript. I can't really be arsed looking through this mess, but creating a menu that resizes and triggers a dropdown when you reach a specific breakpoint is simple, and there are several examples in the forums. Look for posts by @deathshadow, for instance.
     
    PoPSiCLe, Jul 28, 2017 IP
  5. j a m i e

    j a m i e Greenhorn

    Messages:
    24
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    18
    #5
    Hi @upetrovic,

    The menu toggles the list perfectly for me in firefox at 680px and 360px width. What browser is this messing up in?

    --
    G r e e n h o r n
    j a m i e
     
    j a m i e, Jul 28, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,110
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #6
    LI can only be children of UL or OL. HTML 5's i(diotic pointless dumbass redundant) NAV tag is NOT a 1:1 replacement for UL. you need to put a UL inside it.

    You're using HTML 5, you don't need to say type="text/css" when rel="stylesheet" anymore. Same goes for type="text/JavaScript" on <script> tags. (about time you ask me!)

    If you're going to have CSS for SCREEN targets, you should probably be setting that on the <link> and not on the media queries... since I'm SO sure the rest of your CSS makes so much sense for WAP aware handheld, print, or aural.

    Though apart from that? It looks like you're flexing stuff that doesn't even NEED flex... and as others have mentioned, this isn't even JavaScripts JOB anymore.
    http://www.cutcodedown.com/tutorial/mobileMenu

    NOR is it the job for a BUTTON tag.
     
    deathshadow, Aug 8, 2017 IP