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

jdunhin

New member
Joined
Feb 27, 2013
Messages
93
Points
0
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:

<em>You can give it a name like menu.js</em>

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' );
<strong>HTML</strong>

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>
<strong>CSS</strong>

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.
 

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,835
Points
0
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.
 

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,835
Points
0
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.
 
Older threads
Newer threads
Replies
4
Views
3,644
Replies
0
Views
2,343
Replies
16
Views
6,109

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top