Hey guys I've been trying to create a mobile friendly menu. In desktop mode it works fine, but on a mobile phone the links are somehow replaced by # and thus not working. I suppose the issue is with the script that is associated with the menu, but I can't figure out the problem. Could someone help me out?

 

thnx!

 

html:

<a href="#" class="top-menu-button"></a>

<nav id="top-menu" class="fake">
     <ul id="menu-main-menu" class="menu">
          <li id='main-menu-5078'><span class="menu-item-wrap no_icon"><a  href="link"  style=""><span class="link-text">Home</span></a></span><div class='under'></div></li>
                
          <li id='main-menu-5079'><span class="menu-item-wrap no_icon"><a href="http://url.com"  style=""><span class="link-text">Blog page</span></a></span><div class='under'></div></li>

          <li class="current-menu-item" id='main-menu-5092'><span class="menu-item-wrap no_icon"><a  href="http://www.url.com"  style=""><span class="link-text">Contact</span></a></span><div class='under'></div></li>
     </ul>
</nav>

javascript:

<script type="text/javascript">

    jQuery(document).ready(function () {

        var menu_speed = 'normal';
        var animation_effect = 'fade_in';

		jQuery("nav#top-menu > ul > li > ul").hide();

        var windowWidth = jQuery(window).width();

        jQuery(window).resize(function() {
            //jQuery("nav#top-menu > ul > li > ul").hide();
            windowWidth = jQuery(window).width();
            //alert(windowWidth);
        }).resize();


            if(windowWidth < 767)
            {
                jQuery("nav#top-menu > ul > li").click(function () {
                    jQuery('a:first', this).attr("href", "#");
                    jQuery('ul', this).show();
                });

            }
            else
            {
                jQuery("nav#top-menu > ul > li").hover(function () {

                    if (animation_effect == 'fade_in')
                        jQuery('ul', this).stop(true, true).fadeIn(menu_speed);

                    if (animation_effect == 'slide_down')
                        jQuery('ul', this).stop(true, true).slideDown(menu_speed);


                }, function () {

                    if (animation_effect == 'fade_in')
                        jQuery('ul', this).stop(true, true).fadeOut(menu_speed);

                    if (animation_effect == 'slide_down')
                        jQuery('ul', this).stop(true, true).slideUp(menu_speed);

                });
            }


        jQuery('nav#top-menu > ul > li').mouseleave(function() {
            jQuery("nav#top-menu > ul > li > ul").hide();
        });
        
    });


</script>

Edited June 26, 201313 yr by PietPuk

I suppose it is due to this part, but I'm confused about how to fix it...

 

if(windowWidth < 767)
            {
                jQuery("nav#top-menu > ul > li").click(function () {
                    jQuery('a:first', this).attr("href", "#");
                    jQuery('ul', this).show();
                });

            }
            else

How about CSS3 like on my site:

 

<div id="nav">
	<ul id="navbar">
		<li><a href="http://formworkinlondon.co.uk/index.php">home</a></li>
    	<li><a href="http://formworkinlondon.co.uk/about-us.php">about us</a></li>
		<li><a href="http://formworkinlondon.co.uk/portfolio.php">portfolio</a>
    		<ul class="sub1">
        		<li><a href="http://formworkinlondon.co.uk/structures.php">concrete structures</a></li>
				<li><a href="http://concretestairslondon.co.uk/portfolio.php" target="_blank">concrete stairs</a></li>
			</ul>
			<li><a href="http://formworkinlondon.co.uk/contact.php">contact us</a></li>
			<li><a href="http://formworkinlondon.co.uk/faq.php">faq\'s</a></li>
		</li>	
	</ul>

/*Navbar Formatting*/
/*First menu; home, about us, portfolio*/
#navbar {
width: 100%;	
z-index: 8000;
position: absolute;
}

ul#navbar li {
display: inline;
display: block;
position: relative;
float: left;
width: 20%;
text-align: center;
background-color: #F90;
border: 20% solid #CCC;
}

ul#navbar li a:hover {
color: #CCC;	
}

ul#navbar li a {
display: block;
color: #999;	
font-size: 2em;
}
/*First Menu*/

/*Sub Menu Portfolio*/
ul#navbar ul {
display: none;
position: relative;	
}

ul#navbar li:hover > ul {
display: block;	
}

ul#navbar li ul li {
width: 100%;
background-color: #FC9;
}
/*Sub Menu*/

/*Sub Sub Menu; Concrete Structures, Concrete Stairs*/
ul#navbar li:hover ul {
display: block;	
}

ul#navbar li ul li {
width: 100%;
}

ul#navbar li ul li a{
font-size: 1.5em;	
}
/*Sub Sub Menu*/
/*Navbar Formatting*/

Thnx! Actually the menu is formatted with css3 already and it looks quite nice! However I've tried to integrate some jquery to have a sliding effect, but it's that part that seems to break the menu

Edited June 27, 201313 yr by PietPuk

Ah sorry, I think a lot of JQuery's effects are not available on mobile devices yet.

 

I started to really get into a couple of JQuery tutorials on CodeAcademy but stopped myself when I learned unavailable to mobiles.

Ah sorry, I think a lot of JQuery's effects are not available on mobile devices yet.

 

I started to really get into a couple of JQuery tutorials on CodeAcademy but stopped myself when I learned unavailable to mobiles.

 

jQuery does work on mobiles, just not fancy hover effects.

 

They even have a mobile framework (http://jquerymobile.com/).

jQuery does work on mobiles, just not fancy hover effects.

 

They even have a mobile framework (http://jquerymobile.com/).

 

Thanks for that link Jack, hope I'm not coming across rude, it's probably my mistake but:

 

Doesn't look very good. I just quickly played with that link with a button with a slide down transition, then went to test; doesn't work.

 

Looks like there are hardly any effects compared to real JQuery.

Thanks for that link Jack, hope I'm not coming across rude, it's probably my mistake but:

 

Doesn't look very good. I just quickly played with that link with a button with a slide down transition, then went to test; doesn't work.

 

Looks like there are hardly any effects compared to real JQuery.

 

jQuery mobile is almost purely for creating mobile websites. The standard jQuery framework works on mobiles as well, however some plugins and UI are not suited to mobile.

 

We have built a fair few mobile sites using jQuery mobile, it works really well.

Anyway in this case the error is not only present on mobile devices. When I resize my browser to below the nr. of px mentioned in the script the same error occurs.