Floating menu jumps to top of page when sub-menu clicked

Question

I have a floating pop-out menu (position:fixed) that is giving me a weird little problem if you click it after you have scrolled down the page. If your mouse happens to be where the sub-menu overlaps with the main menu when it opens, everything is fine. However if your mouse is not in the overlap, the page jumps right to the top (which I think some people might find a little confusing).

Is there any way to fix this, preferably just using just HTML and CSS?

HTML:

<div id="menu">
 <ul class="levelone" >
    <li class="active"><a href="#">&nbsp;Home</a></li>
    <li class="fly"><a href="#">&nbsp;1</a></li>
    <li class="fly"><a href="#">&nbsp;2 &#187; </a>
        <ul class="dropdown d1">
            <li class="fly"><a href="#">2a</a></li>              
            <li class="fly"><a href="#">2b</a></li>
            <li class="fly"><a href="#">2c</a></li>
        </ul>
    </li>
    <li class="fly"><a href="#">&nbsp;3 &#187; </a>
        <ul class="dropdown d1">
            <li><a href="#">3a</a></li>
            <li><a href="#">3b</a></li>
        </ul>
    </li>
    <li class="fly"><a href="#">&nbsp;4</a></li>
  </ul>
</div>

CSS:

#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left;  text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
#menu ul ul li {margin:0;}
#menu ul ul li a {text-align:center; width:144px;}
#menu ul li a:active + ul.dropdown {left:130px; }
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:130px}
#menu ul li ul.dropdown:hover {left:130px}
#menu ul li ul li{background: #999999}
#menu ul li a:hover{ color: #FFF; background: #333;}
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus { color: #fff; background-color: #337ab7;}

Fiddle here.

possible duplicate of [How can I create an empty HTML anchor so the page doesn't "jump up" when I click it?](http://stackoverflow.com/questions/493175/how-can-i-create-an-empty-html-anchor-so-the-page-doesnt-jump-up-when-i-click) — wf4, Feb 19 '15 at 17:11
Well, my question arose because I didn't realise that anchors were causing me an issue and I was looking for a non JS solution. The other question was from someone who already knew the issue was with anchors and they were looking for a JS solution. — Mark Hamill, Feb 19 '15 at 17:35

score 2 · Accepted Answer · edited Apr 13 '17 at 12:32

2

This behaviour is due to the href attribute in the higher level link. The anchor tag <a> should be used only to navigate, not as dummy "focusable" item. The problem is that these high level buttons are intended to open a sub-menu, not to navigate to a given location in the document.

Solution

Typically, pure HTML/CSS dropdown menus are hard to set up, but given what you have done, I would suggest you to use some unstyled <button> tags for the upper level items (and <a> for actual anchors). They have the benefit to better fit semantically and free you from placeholders like href="#" or href="javascript:void(0)".

Beyond pure semantic, the solutions with the dummy href is more hacky and a bit intrusive because some browsers shows them as the link target on the bottom of the screen (when it should be hidden from users perspective). As a user its really annoying when such content is displayed.

I recommend this question about using a button or a link in the first place.

Code

Here is a working jsFiddle with proper semantic and clean rendering.

edited Apr 13 '17 at 12:32

Community

1
1

answered Feb 19 '15 at 15:52

Demurgos

1,568
18
40

just to help - to refer to the downvoter use @Downvoter . This will send a notification to the downvoter – m0bi5 Feb 19 '15 at 16:28
Thanks for your answer (I didn't downvote it, btw), it obviously works (thanks for the fiddle too :) ) but is it _functionally_ effected either way? I'm not sure the superfluous link-target at the bottom of the screen is enough of an issue to warrant the extra code to remove it, **if** functionality is not effected either way. – Mark Hamill Feb 19 '15 at 16:58
@MarkHamill Then you might consider other downsides of using a blank link: a middle click opens a blank tab (or other controls on mobile/tablets - long click ?) and further processing of the content by external tools and most importantly by yourself might become a pain. Finally, the button way is the way to KISS. It's not just about your particular question, but for whoever reads this later: clarity leads to maintainability and maintainability leads to saner developers :P BTW, I'm not really sure that "it works" shouldn't be the only valid argument on a platform promoting good code. :) – Demurgos Feb 19 '15 at 17:09
Thanks for you response, you've convinced me to change the offending anchors to buttons :) – Mark Hamill Feb 19 '15 at 17:30

wf4 · Answer 2 · 2015-02-19T15:51:35.270

1

<a href="#"></a> The # in your link href will link to the top of the page (causing your jump).

Replace it with this <a href="javascript:void(0)">

When the # is used in an anchor, it is usually followed by an ID e.g. <a href="#HelpSection"> this is a way that you can link to an ID on the current page (or even a different page). As you are not adding an ID, it will jump to the top of the page.

edited Feb 19 '15 at 15:51

answered Feb 19 '15 at 15:43

wf4

3,727
2
34
45

score -1 · Answer 3 · answered Feb 19 '15 at 15:49

Update css and html with this code, i had made update as i understand

#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;top:10px;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
   
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left;  text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
   
  #menu ul ul li {margin:0;}
  #menu ul ul li a {text-align:center; width:144px;}
  #menu ul li a:active + ul.dropdown {left:130px; }
  #menu ul li a:focus + ul.d1,
  #menu ul li a:focus + ul.d2 {left:130px}
  #menu ul li ul.dropdown:hover {left:130px}
  #menu ul li ul li{background: #999999}
  #menu ul li a:hover{ color: #FFF; background: #333;}

        #menu li.active > a,
  #menu li.active > a:hover,
  #menu li.active > a:focus { color: #fff; background-color: #337ab7;}

#wrapper{padding-top: 180px;}

<div id="wrapper">
    <div id="menu">
 <ul class="levelone" >
        <li class="active"><a href="#">&nbsp;Home</a></li>
  <li class="fly"><a href="#">&nbsp;1</a></li>
  <li class="fly"><a href="#">&nbsp;2 &#187; </a>
   <ul class="dropdown d1">
    <li class="fly"><a href="#">2a</a></li>     
    <li class="fly"><a href="#">2b</a></li>
    <li class="fly"><a href="#">2c</a></li>
   </ul>
     </li>
  <li class="fly"><a href="#">&nbsp;3 &#187; </a>
   <ul class="dropdown d1">
    <li><a href="#">3a</a></li>
    <li><a href="#">3b</a></li>
   </ul>
        </li>
  <li class="fly"><a href="#">&nbsp;4</a></li>
    </ul>
</div>

<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>

</div>

Floating menu jumps to top of page when sub-menu clicked

3 Answers3

Solution

Code