Menu that opens when clicking

Question

Menu that opens when clicking

Navigation

#1 by (1 votes)

1

I'm making my site responsive, and I found a menu that becomes a burger menu depending on the screen size, the way I wanted it. However, the menu opens as you mouse (and probably your finger) on top, and I would like it to open and close if you clicked the button.

HTML:

<header>
    <a href="#" id="logo"></a>
    <nav id="menu">
        <a href="#" id="menu-icon"></a>
        <ul>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Home</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">About</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Work</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li style="list-style: none; display: inline"></li>
        </ul>
    </nav>
</header>

CSS:

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
header {
  background: #F62459;
  width: 100%;
  height: 76px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom: 5px solid #F62459;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  float: left;
  padding: 10px
}
a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}
#logo {
  margin: 20px;
  float: left;
  width: 200px;
  height: 50px;
  background: url(logo.svg) no-repeat center;
  display: block;
}
nav {
  float: right;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
}
#menu-icon {
  background: url(menu-icon.png) no-repeat center;
  display: hidden;
  width: 32px;
  height: 32px;
}

@media only screen and (max-width: 640px) {
header {
    position: absolute;
}
#menu-icon {
    display: inline-block;
}
nav ul {
    display: none;
    position: absolute;
    padding: 20px;
    background: #c5c5c5;
    right: 10px;
    top: 65px;
    width: 35%;
}
nav:hover ul {
    display: block;
}
nav li {
    text-align: center;
    width: 100%;
    padding: 15px 0;
    margin: 0;
}
}

JAVASCRIPT:

<script>
    $('#menu-icon').on('click', function() {
        $('#menu').slideToggle('slow');
    });
</script>

javascript html css

asked by anonymous 10.11.2018 / 13:34

1 answer

Referencing OPTION in javascript PHP search with combobox

score 1 · Accepted Answer

Your menu is already working on the click make note that it is .on('click')

However your menu has some CSS problems that you still need to fix as it is breaking the line before entering the css that collects the menu. Also display:hidden does not exist, I believe it should be display:none ...

In short, I made some css adjustments and in the script ... since the toggle was hiding the entire menu including the btn itself, the correct one would be '#menu ul'

See what's in the code:

$('#menu-icon').on('click', function () {
    $('#menu ul' ).slideToggle('slow');
});

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

header {
    background: #F62459;
    width: 100%;
    height: 76px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 5px solid #F62459;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    float: left;
    padding: 10px
}

a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

#logo {
    margin: 20px;
    float: left;
    width: 200px;
    height: 50px;
    background: url(https://unsplash.it/100/50) no-repeat center;
        display: block;
}

nav {
    float: right;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
}

#menu-icon {
    background: url(https://unsplash.it/32/32) no-repeat center;
        display: none;
    width: 32px;
    height: 32px;
}

@media only screen and (max-width: 640px) {
    header {
        position: absolute;
    }

    #menu-icon {
        display: inline-block;
    }

    nav ul {
        display: none;
        position: absolute;
        padding: 20px;
        background: #c5c5c5;
        right: 10px;
        top: 65px;
        width: 35%;
    }

   /* nao precisa desse css
nav:hover ul {
    display: block;
} */

    nav li {
        text-align: center;
        width: 100%;
        padding: 15px 0;
        margin: 0;
    }
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script><header><ahref="#" id="logo"></a>
    <nav id="menu">
        <a href="#" id="menu-icon"></a>
        <ul>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Home</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">About</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Work</a>
            </li>
            <li style="list-style: none; display: inline"></li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li style="list-style: none; display: inline"></li>
        </ul>
    </nav>
</header>