Fix menu into responsive menu .. css/jquery

Question

I have been using flaunt.js ( Original Source , but have modified the initial css and html.

I have removed the class styles from ul and li so it uses just list tags.

But for some reason when I go into mobile.. it shows the 3 line menu button on my local page, but when I click it... things don't work as they do on the source.

I can't see the the menu properly.. I can't see the arrow to show there are drop down.

If someone could assist

thanks

<nav class="nav">
    <ul>
        <li>
            <a href="?=home">Home</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=about">About</a>
        </li>
        <li>
            <a href="?=services">Services</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=portfolio">Portfolio</a>
        </li>
        <li >
            <a href="?=testimonials">Testimonials</a>
        </li>
        <li>
            <a href="?=contact">Contact</a>
        </li>
    </ul>
</nav>

Fiddle

Answer 1

You've removed necessary HTML and haven't compensated for that in the JS

Original JS:

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));

        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

Your modified JS:

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));

        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

See how your selector targets the .nav on both lines? This is adding the span in a place the rest of the script isn't expecting. In your JS to change the selector back to .nav-item and add the .nav-item class back to the root level <li> s.

You will also need to change:

// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){

To:

// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){

There is more than one <ul> in your markup, so your blanket binding the click to <ul> is disrupting things too.

EDIT: Modified HTML, CSS, and JS: http://jsfiddle.net/xtt3j/ . I'm not sure why you're so keen on doing everything without any classes. I'm all about reducing markup but I feel like this is going to be a harder to maintain (or to just wrap your head around). And finally, the arrow won't display in any of these Fiddles because it is an image.

Answer 2

I have modified your example code on http://jsfiddle.net/WdN8J/10/ . In Chrome, there is initial padding offset so I put -webkit-padding-start: 0px. The conflict is that your dropdown nav has absolute position:

.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}

So I added the following line in the click action:

$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});