2

I have the following code, which I wan't to make mobile compatible. Right now the drop down menus don't come out and it goes directly to the link. I wan't it to go to the link on the second click, the first making the drop down menu come out.

<ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li href="#"><a>Compositions</a></li>
            <li href="#"><a>Improv</a></li>
            <li href="#"><a>Recitals</a></li>
            <li href="#"><a>Videos</a></li>
        </ul>
    </li>
    <li href="#"><a>Programming</a></li>
    <li href="#"><a>Academic</a></li>
    <br class="clear" />
</ul>

css:

#topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #444;
    border-radius: 0.3em;
    color: #ddd;
    font-size: 16px;
    vertical-align: middle;
    text-align: center;
}
#topnav ul li {
    border-radius: 0.2em;
    float: left;
}
#topnav ul li a {
    display: inline-block;
    margin: 0.4em 1em;
    color: inherit;
}
#topnav ul li ul {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: none;
    position: absolute;
}
#topnav ul li ul li {
    float: none;
    text-align: left;
}
#topnav ul li:hover ul, #topnav ul li ul:hover {
    display: block;
}
#topnav li:hover {
    background-color: #04f;
}

1 Answer 1

0

If you want to do this with pure javascript and css, in nutshell, this is what you need to do:

override touchstart and touchend event on whole navigation

navigation.addEventListener("touchend", function (e) {
    e.preventDefault();
    // other code here
}, false);

In this point you have to add code to open navigation. Note that any links in navigation wont work at this point.

handle every link click (or second link click on navigation main item) with javascript and use

window.location.href = link.url;

to navigate throw pages.

I hope this helps even if its not much. You can also check already made libraries if there is any help there. One last tip: check newest iOS default behavior on drop-down menus and try to imitate functionality there. Good luck! :)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.