Show/Hide and Sticky Nav with JQuery

Question

I have a bttn (".medianavbttn") which shows/hides a div (".medianav"). My webpage is for mobile devices and as the display:fixed css code does not work on them, i use jquery sticky navigation instead, so i stick it on the top of the page. As i want to stick the navigation also, not only the button, i must display: hidden the "medianav" too. The problem is that in this case, the height of its virtual wrapper will appear without any content, so it pushes my page downer and it is ugly. Instead of hiding the "medianav", i made the virtual wrapper display: hidden, so the navigation height is OK now. BUT : as the virtual wrapper is not visible immediately, when i open the navigation, the slide toggle "swing" animation is not smooth.

Can someone tell me how i can animate it smooth ? Or if it is not possible, which methode should i use for scrolling the navigation in and out of the page with a click of the sticked button ?

The HTML

<div class="medianavbttn">Show Menu</div>

<div class="medianav">
    <ul id="medianav-links">
        <li class="current"><a href="#section1">About</a></li>
        <li><a href="#section2">Gallery Photos</a></li>
        <li><a href="#section3">Contact</a></li>
    </ul>
</div>

The Scripts

<!-- Nav Sticky Effect -->
<script>
    $(window).load(function(){
      $(".medianavbttn").sticky({ topSpacing: 0, className: 'sticky', wrapperClassName: 'navbttn-wrapper' });
    });
    $(window).load(function(){
      $(".medianav").sticky({ topSpacing: 0, className: 'sticky', wrapperClassName: 'nav-wrapper' });
    });
</script>

<!-- Show - Hide Content -->
<script>
$(".medianavbttn").on("click", function(){
    $(".nav-wrapper").slideToggle("slow");
    $(this).text($(this).text() == "Show Menu" ? "Hide Menu" : "Show Menu");
});
</script>

The CSS

.medianavbttn {
position: relative;
display:block;
width: 100%;
height: 30px;
top: 0;
left: 0;
margin: 0;
padding: 5px 0 5px;
text-align: center;
cursor: pointer;
z-index: 999;
}

#mediabody .nav-wrapper {
display: none;
height: auto;
}

.medianav {
position: relative;
display: block;
width: 100%;
padding: 35px 0 5px;
text-align: center;
z-index: 998;
}

#medianav-links {
position: relative;
display: block;
overflow: visible;
width: 100%;
text-align: center;
list-style: none;
z-index: 997;
}

#medianav-links li {
width: 60%;
height: 30px;
position: relative;
display: block;
margin: 2% auto 0;
padding: 5px;
text-align: center;
}

To see what i am talking about on my website : http://www.igorlaszlo.com/mobile.html — Igor Laszlo, Oct 04 '13 at 18:28
Or is it possible to put the ".medianav" inside the button ? In this case it would become sticky and hidden in the same time... Maybe it is a solution for me... — Igor Laszlo, Oct 04 '13 at 19:13

score 0 · Answer 1 · answered Oct 04 '13 at 20:01

0

You could try looking through jQuery .animate() to see if you can find an animation you like

http://api.jquery.com/animate/

answered Oct 04 '13 at 20:01

krilovich

3,475
1
23
33

yes, i found this page already, i am looking at it some hours now but as i am not an expert of javascript, i do not understand a lot from it. I thought i could manipulate the animation, doing it after the load but i have any idea what and how to write in my codes... – Igor Laszlo Oct 04 '13 at 21:17

Show/Hide and Sticky Nav with JQuery

1 Answers1