HASHTAG HARDSHIPS - How to Open a Menu Dropdown WITHOUT hashtag being placed in URL?

Question

So here is my issue. Say I have a menu bar that is supposed to become a dropdown when the user taps on it via a mobile device. Say that I also hate when the # symbol appears after my url when I click on said menu (www.google.com/# for example) I've been able to use the "animate scroll" javascript that allows me to smoothly scroll the site to an anchortag, which also hides the # symbol. But for some reason I am having issues trying to get my menu to open on small screens!

Here is the menu html

<div class=navmover>
    <nav id="effect" class="newClass">
        <ul>
            <li id="mobibutton" class="lightupmobi">
                <a href="#" id="button">
                    <div style="display:block !important;position:relative !important;top:8px !important;padding-left:0.5em !important;right:3px !important;text-align:left !important;">MENU</div>
                    <img id="mobibutton" src="images/nav-icon.png" style="position:relative !important;left:40% !important;">
                </a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link1 href=#intro>Top</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link2 href=#work>Work</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link3 href=#services>Services</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link4 href=#about>About</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link5 href=#contact>Contact</a>
            </li>
        </ul>
    </nav>
</div>

javascript used to open and close menu

<!--Show Hide Button JS-->
<script>
    $(function() {
        $("#button1").click(function() {
            $("#effect").toggleClass("newClass", 1000);
            $("li").toggleClass("showme", 1000);
            return false;
        });
    });
</script>

javascript used to smoothly scroll between anchors

<script type=text/javascript>
    $(document).ready(function() {
        $("#link1").anchorScroll({fx:"easeInOutExpo"});
        $("#link2").anchorScroll({fx:"easeInOutExpo"});
        $("#link3").anchorScroll({fx:"easeInOutExpo"});
        $("#link4").anchorScroll({fx:"easeInOutExpo"});
        $("#link5").anchorScroll({fx:"easeInOutExpo"});
        $("#link6").anchorScroll({fx:"easeInOutExpo"});
        $("#link7").anchorScroll({fx:"easeInOutExpo"});
    });
</script>

<script type=text/javascript>
    function scrollTo(b) {
        var a=$(b).offset().top;
        $("html,body").animate({scrollTop:a},"slow");
    }
</script>

Rest of the javascript in the site. Apologies... I realize it is a ton to look at.

<script async type="text/javascript" src="//cdn.sublimevideo.net/js/kmaxx7p4.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script async src=javascripts/svg.js></script>
<script src=javascripts/jquery.js></script>
<script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script>
<script src=http://code.jquery.com/jquery-1.9.1.min.js></script>
<script src=javascripts/jquery-migrate-1.2.1.min.js></script>
<script src=javascripts/jquery.animate.js type=text/javascript></script>
<script src=javascripts/jquery.scrollanchor.js type=text/javascript></script>
<script src=javascripts/jquery.sticky.js type=text/javascript></script>
<script async src=javascripts/jquery.inview.js type=text/javascript></script>
<script async src=javascripts/jquery.flexslider.js type=text/javascript></script>
<script async src=javascripts/jquery.prettyPhoto.js type=text/javascript></script>
<script src=http://vjs.zencdn.net/c/video.js></script>
<script type=text/javascript>function ReplaceContentInContainer(c,b){var a=document.getElementById(c);a.innerHTML=b}</script>
<script type=text/javascript>function preload(a){$(a).each(function(){$("<img/>")[0].src=this})}preload(["images/bg.png","images/cloudscape2.png","images/logo2.svg","images/logo2.png",]);</script>
<script>$(function(){$(".two").css("opacity",0).fadeTo(0,0);$(".one").on("mouseenter mouseleave",function(a){var b=a.type=="mouseenter"?$(".two",this).stop().fadeTo(200,1):$(".two",this).stop().fadeTo(200,0)})});</script>
<script>$(document).ready(function(){$("nav").sticky({topSpacing:0})});</script>
<script type=text/javascript>$(document).ready(function(){$("#link1").anchorScroll({fx:"easeInOutExpo"});$("#link2").anchorScroll({fx:"easeInOutExpo"});$("#link3").anchorScroll({fx:"easeInOutExpo"});$("#link4").anchorScroll({fx:"easeInOutExpo"});$("#link5").anchorScroll({fx:"easeInOutExpo"});$("#link6").anchorScroll({fx:"easeInOutExpo"});$("#link7").anchorScroll({fx:"easeInOutExpo"});});</script>
<script type=text/javascript>function scrollTo(b){var a=$(b).offset().top;$("html,body").animate({scrollTop:a},"slow");}</script>
<script>$(window).load(function(){$(".flexslider").flexslider({animation:"slide",slideshow:true,slideshowSpeed:3500,animationSpeed:1000})});</script>
<script type=text/javascript charset=utf-8>$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false,theme:"light_square"})});</script>

If push comes to shove I can also give the link to my website so you can see for yourself on your phone/tablet and see the issue I'm having. Let me know if I'm being too vague and you guys need more info as well. Please help and thank you!

Answer 1

Don't use # as your href value. There are lots of different ways to "target nothing" like you are trying to do, including:

• using event.preventDefault() in the code that is bound to your event, to ignore the default link behavior
• using return false; at the end of the code that is bound to your event, to interrupt any further processing of the event all together
• using href="javascript: void(0);" as the target of your <a> tag, to make the target "do nothing"

. . . and there are other variations, depending on the situation (e.g., event.stopPropagation() to stop the event from triggering on all of an elements ancestors, not the current element).

Personally, in this particular case, I would go the href="javascript: void(0);" route myself, but you have some wiggle room to work with, to come up with the approach that you prefer.

---

Update: Come to think of it, is there a reason why you are using an <a> tag to begin with (e.g., styling reasons)? You could simply bind the click on the <li> instead and remove the link behavior from the equation all together . . .

Answer 2

You colud run a scroll function that does what you wish

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Answer 3

If you don't want a hashtag because you don't want it to go to the top of the page, just use an empty javascript: URL.

<a href="javascript:">Link does nothing, tada</a>