如何仅在移动设备上添加菜单图标？

Question

How can I add a menu-icon when I scale a page down below 769px?

I added a button a one page site that I am developing in order to display the menu on mobile devices.

Used this in jquery:

if($(window).width() < 769){
    $('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>');
}

The menu shows up if initially start the site with a window of size below 769px..but if I load the page on a big screen and try to resize the window to a width below 769,the menu-icon does not show up immediately.Instead I have to refresh the page for it to appear.

Thanks in advance

Answer 1

Because the script you run just runs once... on page load I guess. Why would it react on resizing the window? You dont specify that in your script.

Its far easier to just add the icon in the original html and display/ hide it with css media queries :

.menu-icon { display: none; }

@media (max-width: 768px) {
  .menu-icon { display: block; }
}

Its also possible to detect mobile devices via css , not just based on the window width.

Answer 2

You have to put your code inside $(window).resize() like follows so that whenever page size gets modified; the handler will get invoked and you can run your logic accordingly:

$('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>'); //append the icon to html
$("i.fa-bars.menu-icon").hide(); //hide it initially

$(window).resize(function() {
    if($(window).width() < 769){
        $("i.fa-bars.menu-icon").show(); //show it on mobile view
    }
    else
    {
        $("i.fa-bars.menu-icon").hide(); //hide it on bigger screen
    }
}).trigger('resize');//firing the resize immediately