14 Replies - 450 Views - Last Post: 12 November 2018 - 05:25 AM

#1 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

hamburger icon menu not listing menu when clicking

Posted 04 November 2018 - 12:37 PM

[
Hi Folks,

I am having an issue with the behaviour of my hamburger menu when i click the options don't appear, when i chelck the console
in chrome there does not seem to report any errors within the console.


HTML
<ul class="header-links">
                <li> <a href="#"> <span class="fas fa-bars" id="hambuger" onclick="activate();"></span></a></li>
                <li class="header-links__item"><a href="#" class="header-links__link"> Sign Up </a></li>
                <li class="header-links__item"><a href="#" class="header-links__link"> Login </a></li>
                <li class="header-links__item"><a href="#" class="header-links__link"> RSS Feeds </a></li>
                <li class="header-links__item"><a href="#" class="header-links__link"> Archived News </a> </li>
            </ul>




CSS

    @media screen and (max-width: 580px){
    .header-links__item,
    .header-img {
        display: none;
    }  

    .fa-bars {
        display: flex;
        color: #fff;
        font-size: 2em;
        cursor: pointer;
        margin-right: 1em;
    }

    .header-links__item:checked {
        display: block;
    }
}



JS

[code][

function activate() {
var menu = document.getElementById('hamburger')

if (menu) {
document.getElementsByClassName('header-links__item').style.display="block";

}
}

activate();
/code]

This post has been edited by salv236: 04 November 2018 - 12:38 PM


Is This A Good Question/Topic? 0
  • +

Replies To: hamburger icon menu not listing menu when clicking

#2 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 05 November 2018 - 01:57 AM

hamburger, not hambuger
Was This Post Helpful? 0
  • +
  • -

#3 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 05 November 2018 - 03:35 AM

View Postandrewsw, on 05 November 2018 - 01:57 AM, said:

hamburger, not hambuger



yes, sorry typo error was typing too quick :bigsmile:

I added some jquery when i click it shows the menu, i tried to add code on next click that it hides however does not seem
to function below is the code:

$(document).ready(function(){

    //create a hamburger click event
    $("#hambuger").click(function(){
        /* your code to run when the hamburger menu is clicked, such as add display "block" to the hidden menu, add classes, or change styles using jQuery/Javascript. */
        $('.header-links__item').css( "display", "block" );

        //on next click hide the menu
        $("#hamburger").slideToggle("slow").hide();
    });
 
 });



Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 05 November 2018 - 05:32 AM

"however does not seem to function below"

You haven't written code that would distinguish between one click and the next...

This SO topic demonstrates a couple of approaches to showing/hiding elements, checking the length of items (which are visible) or using toggle().

Question moved to jQuery forum.
Was This Post Helpful? 1
  • +
  • -

#5 Sheepings   User is offline

  • Senior Programmer
  • member icon

Reputation: 224
  • View blog
  • Posts: 1,260
  • Joined: 05-December 13

Re: hamburger icon menu not listing menu when clicking

Posted 05 November 2018 - 08:32 AM

Check your spelling as well :: $("#hambuger").click(function(){
Was This Post Helpful? 0
  • +
  • -

#6 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 06 November 2018 - 03:30 AM

Ok this is what i have come up with, still doesn't give the desired effect so i'm still thinking

$(document).ready(function(){

    //create a hamburger click event
    $("#hamburger").click(function(){
        /* your code to run when the hamburger menu is clicked, such as add display "block" to the hidden menu, add classes, or change styles using jQuery/Javascript. */
        $(".header-links__item").css( "display", "block" );

        //on next click hide the menu
        if($(".header-links_item").css("display")=== "block"){
                $(".header-links__item").hide();
            );
        } else {
            $(".header-links__item").show();
        }
    });
 
 }); //close jquery document loaded call



Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 06 November 2018 - 05:31 AM

You need to expand on "still doesn't give the desired effect".

You set display to block then immediately check if the display (of the first element) is block... This will always be true (because you have just set it) so it will always hide().

Did you refer to the link I provided?
Was This Post Helpful? 1
  • +
  • -

#8 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 06 November 2018 - 08:52 AM

Hi andrewsw,

Thank, sorry i did not read attentively the solution provided at SO, the code below managed to resolve the issue:

    $(document).ready(function(){

    $("#hambuger").click(function() {     
        $(".header-links__item").toggle("slow");

    });
 
 }); //close jquery document loaded call  




This post has been edited by andrewsw: 07 November 2018 - 11:33 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 07 November 2018 - 11:34 AM

Good.

So... you are going with hambuger?
Was This Post Helpful? 1
  • +
  • -

#10 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 07 November 2018 - 11:46 AM

View Postandrewsw, on 07 November 2018 - 11:34 AM, said:

Good.

So... you are going with hambuger?



I need to correct that LOL
Was This Post Helpful? 0
  • +
  • -

#11 Sheepings   User is offline

  • Senior Programmer
  • member icon

Reputation: 224
  • View blog
  • Posts: 1,260
  • Joined: 05-December 13

Re: hamburger icon menu not listing menu when clicking

Posted 09 November 2018 - 05:21 PM

That made my day. Can't stop laughing haha andrewsw
Was This Post Helpful? 0
  • +
  • -

#12 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 12 November 2018 - 01:59 AM

I now have an issue with jquery, at 400px when you test the website on a smartphone you click the hamburger menu, the menu should populate with a background color which doesn't seem to be the case

<nav class="navigation">
                <ul class="navigation-items">
                    <li> <a href="#"> <span class="fas fa-bars" id="hamburger-left"></span></a></li>
                    <li class="navigation-items__active"><a class="navigation-items__link" href="#"> home </a></li>
                    <li class="navigation-items__item"><a class="navigation-items__link" href="#"> style demo </a></li>
                    <li class="navigation-items__item"> <a class="navigation-items__link" href="#"> full width </a></li>
                    <li class="navigation-items__item"><a class="navigation-items__link" href="#"> dropdown </a> </li>
                    <li class="navigation-items__item"><a class="navigation-items__link" href="#"> portfolio </a> </li>
                    <li class="navigation-items__item"><a class="navigation-items__link" href="#"> gallery </a> </li>
                    <li class="navigation-items__item"><a class="navigation-items__link" href="#"> long text link </a> </li>
                </ul>
            </nav>




$(document).ready(function(){

    $("#hamburger").click(function() {     
        $(".header-links__item").toggle("slow");

    });
 
 }); //close jquery document loaded call  

 $("#hamburger-left").click(function() {     
    $(".navigation-items__active").toggle("slow");
    $(".navigation-items__item").toggle("slow");
 });



http://salvatoresaia.com/euonymus/
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 12 November 2018 - 03:43 AM

There is nothing in the code that you have just posted that relates to a change at 400px. Please post relevant code that relates to, and demonstrates, the problem you are trying to describe.
Was This Post Helpful? 0
  • +
  • -

#14 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

Re: hamburger icon menu not listing menu when clicking

Posted 12 November 2018 - 03:56 AM

The minimum breakpoint specified in my media queries is at 500px, the hamburger menu is implement at 580px

@media screen and (max-width: 580px){
    .header-links {
        display: block;
    }

    .header-links__item {
        background: #2aa2d4;
        position: relative;
        right: 2em;
        top: 1.5em;
        width: 100%;
    }
    
    .header-links__item,
    .header-img,
    .navigation-items__active,
    .navigation-items__item {
        display: none;
    }  

    .header-social {
        font-size: 2em;
    }

    .fa-bars {
        display: flex;
        color: #fff;
        /* font-size: 2em; */
        cursor: pointer;
        margin-right: 0.5em;
    }

    .calltoaction {
        display: flex;
        flex-direction: column;
    }

    .calltoaction__heading {
        top: 2em;
    }

    .navigation {
        padding: 1em;
        height: 2em;
    }

    .navigation-items {
        display: inline-block;
        position: relative;
        z-index: 1;
        height: 4em;
        margin-left: 1em;
    }

    .navigation-items__active,
    .navigation-items__item {
        
        border-right: 0;
        padding-bottom: 0.5em;
    }

    .navigation-items__link {
        border-bottom: 1px solid #151515;
        vertical-align: middle;
    }

    .carousel-arrow__left,
    .carousel-arrow__right {
        width: 24px;
    }

}



Was This Post Helpful? 0
  • +
  • -

#15 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: hamburger icon menu not listing menu when clicking

Posted 12 November 2018 - 05:25 AM

If you are talking about your hamburger menu items have this #2aa2d4 background colour then they do on my computer at small resolution. Perhaps you need to clear your browser cache.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1