1

I'm trying to get this slide menu to work just as it is, but without changing the URL. Right now as you press the links to side the panels left and right, it will change the URL to have #default, #target1, #target2, #target3 appended to the end of the URL. How do I change the code to NOT have the URL change at all? I want it to remain the same as the links are clicked and the panels are sliding. http://jsfiddle.net/xgvn6y0e/

I am trying not to use javascript/jquery. I want it to be pure CSS. If this can't be done, please let me know.

<div class="container">
<div class="main-menu"><a href="#default">Main Menu Link</a>
</div>
<div class="wrapper">
<div id="right">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
<div class="active" id="default">
<div id="ttt">
This is the Target Menu<br/>
<a href="#target1">Target 1</a><br/>
<a href="#target2">Target 2</a><br/>
<a href="#target3">Target 3</a><br/>
</div>
</div>
</div>
</div>
</div>
kimberlyvoo
  • 197
  • 2
  • 11
  • How about adding `onClick="return false;"`? It's very much a javascript related question, be sure to include the tag. – Stickers May 25 '15 at 16:57
  • possible duplicate of [Prevent href="#" link from changing the URL hash](http://stackoverflow.com/questions/20215248/prevent-href-link-from-changing-the-url-hash) – Cooper Buckingham May 25 '15 at 17:01
  • I should have added that I am trying not to use javascript. I will edit my question to include that. – kimberlyvoo May 25 '15 at 17:02
  • This is not a duplicate question. That other question does not help me at all. I am looking for a solution that doesn't use javascript. Can someone help? Point me in the right direction. – kimberlyvoo May 25 '15 at 17:11
  • Another similar one - [jump-to-anchor-tag-without-showing-hashtag-in-url](http://stackoverflow.com/questions/10147283/jump-to-anchor-tag-without-showing-hashtag-in-url) – Felix A J May 25 '15 at 17:27
  • I do not want to use javascript! – kimberlyvoo May 25 '15 at 17:33
  • I think using javascript is the only way to hide the hash in the url. – Sean Stopnik May 25 '15 at 17:48
  • As you may or may not have inferred from the comments above, this is not possible without javascript. Also, this is quite outside the scope of CSS. What might be the reason for not wanting to use javascript at all? – Roope May 25 '15 at 18:10
  • It is actually possible using css animation. It took me about 7 hours to figure it out! I just tried it. The reason I don't want to use javascript is because the project uses jsangular and I don't want any conflicts down the road. – kimberlyvoo May 26 '15 at 02:41

0 Answers0