How to add menu toggle without JS?

Question

I'm trying to convert a site (originally html/css) into a WordPress theme, and a lot if not most, is going to be hard code still.

I've added a menu that is responsive to the website, however, can't seem to get it to work to my needs.

I'm wanting it to have a little hamburger icon, or even just "Menu" that they can click on, and will open the menu of choices.

Right now, this is what it looks like normally.

This is what it looks like "closed".

It's just a little white bar when it's closed, and when you click to open it, it's actually a link for the first list..

Here's the HTML for the menu.

<nav class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="#">Artists</a></li>
        <li><a href="#">Framing</a></li>
        <li><a href="#">Restorations</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

The CSS is a bit more complex and long, as it also has the @media queries in it.

.nav-container {
    margin:0 auto;
    max-width:1000px;
    background:#333;
    clear:both
}

.nav-inner {
    max-width:658px;
    margin:0 auto
}

nav.main {
    margin-left:-34px
}

nav.main ul {
    border-right:#FFF solid 2px
}

nav.main ul li {
    display:inline-block;
    min-height:29px;
    padding:17px 40px 5px;
    text-align:center;
    background-color:#7d833d;
    border-left:#FFF solid 2px;
    margin-left:-4px;
    font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:1em
}

nav.main a {
    color:#FFF;
    text-decoration:none
}

nav.main a:hover {
    color:#000;
    text-shadow:none
}

nav.main a:visited {
}

/* nav */
.nav {
    position:relative;
    margin:20px 0;
/*height: 60px;*/
    line-height:5;
    padding-top:3px
}

.nav ul {
    margin:0;
    padding:0;
    margin-top:-10px
}

.nav li {
/*margin: 0 5px 10px 0;*/
    padding:0;
    list-style:none;
    display:inline-block;
    min-height:29px;
/*padding: 17px 40px 7px 40px;*/
    text-align:center;
    background-color:#7d833d;
    border-left:#FFF solid 2px;
    margin-left:-8px;
    font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:1em;
    padding-left:3px;
    padding-right:3px;
    color:#fff
}

.nav a {
    padding:3px 12px;
    text-decoration:none;
    color:#fff;
    line-height:100%
}

.nav a:hover {
    color:#000
}

.nav .current a {
    background:#999;
    color:#fff;
    border-radius:5px
}

/* center nav */
.nav.center ul {
    text-align:center
}

@media screen and (max-width: 600px) {
.nav {
    position:relative;
    min-height:40px
}

.nav ul {
    width:100%;
    padding:2px 0;
    position:absolute;
    top:0;
    left:0;
    border:solid 1px #aaa;
    background:#fff url(images/icon-menu.png) no-repeat 10px 11px;
    border-radius:5px;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
/* margin-top: 5px; */
    height:auto;
    padding-top:3px;
    padding-bottom:5px
}

.nav li {
    display:none;
/* hide all <li> items */
    margin:0
}

.nav .current {
    display:block
/* show only current <li> item */
}

.nav a {
    display:block;
    padding:5px 5px 5px 32px;
    text-align:left
}

.nav .current a {
    background:none;
    color:#666
}

/* on nav hover */
.nav ul:hover {
    background-image:none
}

.nav ul:hover li {
    display:block;
    margin:0 0 5px
}

.nav ul:hover .current {
    background:url(images/icon-check.png) no-repeat 10px 7px
}

/* right nav */
.nav.right ul {
    left:auto;
    right:0
}

/* center nav */
.nav.center ul {
    left:50%;
    margin-left:-90px
}

.address-box {
    margin-bottom:15px
}

I've looked through a few pages of Google, but it's harder to find an answer with a specific menu. I can't get JQuery to work with WordPress, so HTML/CSS is preferred.

Answer 1

There's a trick you can use with :focus and tabindex attribute to make any element focusable. This allows the "toggle" like property to be made. See the example in the snippet below:

.submenu { display: none; }

/* [tabindex] can be used to use :focus on normally unfocusable elements */
li:focus > .submenu {
  display: block;
  margin-left: 10px;
}

/* Remove outlines from focus */
li[tabindex] { outline: none; }

<ul>
    <li tabindex="">Click me!
        <ul class='submenu'>
            <li>Submenu</li>
            <li>Submenu</li>
            <li>Submenu</li>
        </ul>
    </li>
</ul>

See this JSFiddle for a more advanced example.

Reference: https://stackoverflow.com/a/8616525/1113225

Answer 2

I always find that using a good framework helps solve this problem quickly. I like using one called UIKit. I'm also a fan of bootstrap, but have liked uikit a bit more for some of its features like the 'off canvas' navigation feature, found here: off canvas navigation - uikit

I usually use media queries to handle the visibility of the 'hamburger button' that I use for opening the off canvas nav. (Uikit also has that hamburger nav icon built in) it's pretty easy to set up.

Depending on when you want your hamburger button to show up, your media query could be something like this:

@media all and (max-width:767px){ .hamburger-btn {display:block;} }
@media all and (min-width:768px){ .hamburger-btn {display:none;} }

Answer 3

jQuery more than likely isn't working because of noconflict. You'll need to wrap your jquery code in this:

jQuery(document).ready(function ($) {
  //Your code here
});

You could also write your jQuery using jQuery instead of $.

After that, using $ won't cause you any more problems.

Here's a simple navigation close example using jQuery:

http://jsfiddle.net/austinthedeveloper/52vxsun1/

jQuery(document).ready(function ($) {
    $('h1').on('click',function(){
        $('nav').slideToggle();
    });
});

Answer 4

I do not think that it is possible to make a menu that is as compatible as using jquery but one thing you can try is the :hover feature in css. Here is an example I made, try manipulating it into your code to make it do what you want using the opacity attribute.

<div>
    <h2>Hover Here</h2>
    <ul>
        <li>List Item1</li>
        <li>List Item2</li>
        <li>List Item3</li>
    </ul>
</div>
div {
    height:130px;
    width:150px;
    background-color:yellow;
}
ul {
    opacity:0;
}
ul:hover {
    opacity:1
}

http://jsfiddle.net/JoshuaHurlburt/avttkdst/