Floating Menu Bar


Author Message
akstgsb

Posted: 12/31/2013
Quote message 

Hi....I am learning web Designing and I want to know how can I design a floating menu bar for my website.Appreciate Your Responses.
 
jrgweb

Posted: 12/31/2013
Quote message 

@akstgsb - Are you looking for a vertical or horizontal menu?

Basically, a floating menu is a fixed menu when page scrolls.

example of horizontal menu.
http://demo.artisteertoday.com/menu_header/blog.html

This is the script that does the trick:
<script type="text/javascript">
$(document).ready(function() {

var div = $('#headdemo');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});

});

</script>

It's located at the bottom of the example page.

Here are a few others:
http://www.jquery4u.com/menus/floating-message-plugins/
 


Posted: 1/23/2014
Quote message 

@jrgweb +1

Good one. Thanks much.

You could consider putting this in 'User Tips'. I would [consider it, I mean].
 
ftzptr799

Posted: 1/23/2014
Quote message 

@akstgsb & jrgweb

Where do I put this code in Artisteer when wanting a floating Menu? Please Help :-)

<script type="text/javascript">
$(document).ready(function() {

var div = $('#headdemo');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});

});

</script>
 
Josicus

Posted: 1/23/2014
Quote message 

<a href="http://imgur.com/0VQ22vl"><img src="http://i.imgur.com/0VQ22vl.png?1" title="place it here" /></a>

 
Josicus

Posted: 1/23/2014
Quote message 

<a href="http://imgur.com/0VQ22vl"><img src="http://i.imgur.com/0VQ22vl.png?1" title="Hosted by imgur.com" /></a>
 
Robert Lowly

Posted: 3/8/2014
Quote message 

Hi Jrgweb, thanks for this great script.

I also tried using it with a slight modification:
<p><script type="text/javascript">
$(document).ready(function() {

var div = $('.art-nav');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});

});

</script></p>

and it kind of works, but when the header becomes fixed, it jumps to the right side of the display, i have made you a demo of what i mean...

http://sh-original-media.com/javatest/latest-news.html

Let me know if you can see it...

Any help would be amazing.!
Thanks man :)
 
jrgweb

Posted: 3/8/2014
Quote message 

@Robert Lowly - Add width:100%; to .art-nav class
 
Azari

Posted: 4/22/2014
Quote message 

Quote jrgweb:

@akstgsb - Are you looking for a vertical or horizontal menu?

Basically, a floating menu is a fixed menu when page scrolls.

example of horizontal menu.
http://demo.artisteertoday.com/menu_header/blog.html

This is the script that does the trick:
<script type="text/javascript">
$(document).ready(function() {

var div = $('#headdemo');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});

});

</script>

It's located at the bottom of the example page.

Here are a few others:
http://www.jquery4u.com/menus/floating-message-plugins/


Hi, I find your posting is a great help. However, I don't quite managed to get it to work properly. I wanted to make the entire header float when the page scrolls. So I introduced new div id "SSS01-headless" surrounding the header. However, when we scroll down, the header pops to the left side of the page with the menus missing. The link below will take you to the page.

http://www.tanggam.com/v4/

Still a novice coder here.
 
jewelcam

Posted: 4/24/2014
Quote message 

Quote jrgweb:

@Azari - Are you wanting the header and nav to be fixed?
The script that you are trying to use is for a nav or header to float up like this:
http://wordpress.artisteertoday.com/tips-tricks/

http://www.artisteer.com/?post_id=229538&p=forum_post&forum_id=13

Scroll about 550px and see what happens.

If you want the header and nav fixed, then add this to the css.

.SSS01-header {
position: fixed;
z-index: 599!important;
margin-left: 198px;
}
.SSS01-sheet {
margin-top: 70px!important;
}

Your current header and nav are not large enough the get the effect of the script. At least in my opinion.




@jrgweb

i would like to add the floating horz menu bar effect to a site im working on the link is http://ncwebservice.com/demo/Joomla/8/

im assuming i add the script code to the template.css file.

could you direct me what to do?

thank you




 
jrgweb

Posted: 4/24/2014
Quote message 

@jewelcam - The script needs to be added to the index.php not the css.

add this script to the footer of the index.php page.
I assume you know how to do this in joomla.

<script type="text/javascript">
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 170) {
jQuery(".art-nav").addClass("tiny"); }
if (scroll <= 170) { jQuery(".art-nav").removeClass("tiny");
} });
</script>

then add this css in the template.css file where you currently have the old script.

.art-nav.tiny {
position: fixed;
z-index: 499;
width: 100%;
top: 0!important;
transition: height 500ms, background 500ms;
}

other tweaks may n\be needed. Let me know.


 
jewelcam

Posted: 4/24/2014
Quote message 

Quote jrgweb:

@jewelcam - The script needs to be added to the index.php not the css.

add this script to the footer of the index.php page.
I assume you know how to do this in joomla.

<script type="text/javascript">
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 170) {
jQuery(".art-nav").addClass("tiny"); }
if (scroll <= 170) { jQuery(".art-nav").removeClass("tiny");
} });
</script>

then add this css in the template.css file where you currently have the old script.

.art-nav.tiny {
position: fixed;
z-index: 499;
width: 100%;
top: 0!important;
transition: height 500ms, background 500ms;
}

other tweaks may n\be needed. Let me know.




@jrgweb

:-D absolutely amazing!!! thank you dearly
 
jewelcam

Posted: 4/24/2014
Quote message 

@jrgweb

Another ? For the home page i run one template for the other pages i run another template.

how do i get the same top menu effect for pages that are are the home page?

for example this link: http://ncwebservice.com/demo/Joomla/8/index.php/ct-menu-item-5

i attempted to apply the code you gave me for the homepage but it did not work for the other pages. hope that makes sense. :-/
 
BreTweb

Posted: 5/16/2014
Quote message 

Hello

I would like to fix the top menu here
http://s524642965.onlinehome.fr/rioux2/

I have tried to fill in script into index.php but doen't work
Please can you give me some help ?

Thank you
 
jrgweb

Posted: 5/17/2014
Quote message 

@BreTwed - From the looks of the template, it looks like you just want a fixed horizontal nav bar and not a floating nav bar.

You don't need a script for a standard fixed nav bar.
remove the script and headdemo class

.nav {
position:fixed;
width:100%;
}

Now if the menu was below the slider, then you would use the script and headdemo class.

So which one are you wanting??
 
jrgweb

Posted: 5/17/2014
Quote message 

@Robert Lowly

Are you referring to this example?
http://demo.artisteertoday.com/dev_team/

If so, add this to the object. transition: all 0.5s ease;
example:

.art-logo-2096671242 {
transition: all 0.5s ease;
}

 
Robert Lowly

Posted: 5/17/2014
Quote message 

Wow Jrgweb, you are amazing :)

Thanks so much for this!
 
hooman

Posted: 5/4/2016
Quote message 

dear jrgweb could you plz help me to make menubar fixed on top in this website?

site: http://jahantest.ir/pminoodar/