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

jdunhin

Active member
Registered
Joined
Feb 27, 2013
Messages
72
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.
 

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
890
Points
28
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.
 

Marc0

Well-known member
Registered
Joined
Jun 6, 2012
Messages
890
Points
28
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
Recommended Threads
Replies
1
Views
3,141
Replies
1
Views
2,126
fwh
Replies
34
Views
14,609
Similar Threads
Replies
10
Views
672
Replies
5
Views
561
Replies
3
Views
3,682

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

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