Ever need a fixed menu when scrolling down on the website.

jdunhin · May 7, 2013

Ever need a fixed menu when scrolling down on the website. I have a bit of code that can work with you. Just quick thanks to Ruan Vermeulen*for helping me with the JavaScript.

First create a Javascript file and insert this code:

You can give it a name like menu.js

Code:

jQuery(document).ready(function(){
      jQuery(window).scroll(function() {
           var scrollposition = jQuery(window).scrollTop();
           if((scrollposition <= 250)) {
                jQuery(".small-menu").hide();
           } else if ((scrollposition > 250)) {
                jQuery(".small-menu").show();
           }
      });
 });

Now enqueue*the Javascript in Wordpress:

You must put this code in the functions file.

Code:

function my_scripts() {
	wp_enqueue_script(
		'custom-script',
		get_bloginfo( 'template_url' ) . '/js/menu.js',
		array( 'jquery' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

HTML

Now creat your div in the header.

Code:

<div class="small-menu">
*<ul>
* * * <li><a href="link">Link name</a></li>
*</ul>
*<div id="scrollmenu" class="sidebar">  ////i created a widget area. If you don't know how it works you may ask me or browse the blog
* * * <?php dynamic_sidebar( 'scrollnav' ); ?>
*</div>
*</div>

CSS

Now you style it:

Code:

.small-menu {
      background-color: #F88123;
      width:960px;
      height:33px;
      display: none;
      position:fixed;
      z-index: 9999;
      }

That is it. If it is not working ask me on the blog, I will help you. Remember to check if the Javascript is running.

Marc0 · May 7, 2013

Hi Jdunhin, this is really an useful article about creating a fix menu when you are scrolling on your website. It will be better if you show a demo in your thread.
As I saw your articles. this will make a widget showed with code, integrated Jquery and stylesheet ( Css )

Code:

<?php dynamic_sidebar( 'scrollnav' ); ?>

I think that, from your article, I can make a simpler fixed menu with pure Css and PHP to create it without Jquery or Javascript
only using z-index ( css postion) and php. if remove jquery we will decrease website loading time and website size can be slighter.

jdunhin · May 7, 2013

Awesome

yes on http://helpendehand.co.za i did a menu for them. Can you show me your method please. I like to learn and it is all about speed on a website.

Marc0 · May 7, 2013

Hi Jdunhin,
Try to google search an Pure Css menu, after that you create div ( container ) and put your menu into that div.
using div with css position
example :

Code:

#container {
 position:absolute;
 top:0; // set what correspond to your site
 right:0 ; // set what correspond to your site
 width:500 px; // set what correspond to your site
 height:25 px;
}

And combine with your php code to create Wordpress menu widget
in case you want your menu only appear when scrolling webpage, you need a bit javascript ( don't need Jquery, it's very weight ) for that.

It's ok. I only show my ideas, not in details.

Ever need a fixed menu when scrolling down on the website.

jdunhin

Active member

Marc0

Well-known member

jdunhin

Active member

Marc0

Well-known member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud