Announcement

Collapse
No announcement yet.

Fixed Navigation Menu

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Fixed Navigation Menu

    So, the thing I'm working on would look like this http://codyhouse.co/demo/smart-fixed...n/index.html#0
    However, I don't want the top menu, but just the one that pops up in the down right corner.
    Code:
    jQuery(document).ready(function($){
    	// browser window scroll (in pixels) after which the "menu" link is shown
    	var offset = 0.1;
    
    	var navigationContainer = $('#cd-nav'),
    		mainNavigation = navigationContainer.find('#cd-main-nav ul');
    
    	//hide or show the "menu" link
    	checkMenu();
    	$(window).scroll(function(){
    		checkMenu();
    	});
    
    	//open or close the menu clicking on the bottom "menu" link
    	$('.cd-nav-trigger').on('click', function(){
    		$(this).toggleClass('menu-is-open');
    		//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
    		mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
    
    	});
    
    	function checkMenu() {
    		if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
    			navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    				mainNavigation.addClass('has-transitions');
    			});
    		} else if ($(window).scrollTop() <= offset) {
    			//check if the menu is open when scrolling up
    			if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
    				//close the menu with animation
    				mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
    					//wait for the menu to be closed and do the rest
    					mainNavigation.removeClass('is-visible is-hidden has-transitions');
    					navigationContainer.removeClass('is-fixed');
    					$('.cd-nav-trigger').removeClass('menu-is-open');
    				});
    			//check if the menu is open when scrolling up - fallback if transitions are not supported
    			} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
    					mainNavigation.removeClass('is-visible has-transitions');
    					navigationContainer.removeClass('is-fixed');
    					$('.cd-nav-trigger').removeClass('menu-is-open');
    			//scrolling up with menu closed
    			} else {
    				navigationContainer.removeClass('is-fixed');
    				mainNavigation.removeClass('has-transitions');
    			}
    		} 
    	}
    });
    That is the main javascript code I found, but I don't know how to make it that the down right menu always stays there and doesn't "pop" and that the upper menu doesn't even show up.

  • #2
    Hi,

    #menu {
    position: fixed;
    right: 0;
    top: 50%;
    width: 8em;
    margin-top: -2.5em;
    }

    Comment

    Working...
    X