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,879
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,879
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,004
Replies
0
Views
1,879
Replies
16
Views
5,241
Latest threads
Replies
2
Views
36
Replies
1
Views
19
Replies
0
Views
19
Replies
3
Views
25
Recommended threads
Replies
25
Views
7,104
Replies
5
Views
143
Replies
4
Views
2,858

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

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