Author Message
akstgsb

Posted: 12/31/2013

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

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

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 @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 @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

<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

<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

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 @Robert Lowly - Add width:100%; to .art-nav class Azari Posted: 4/22/2014 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:

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 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.

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

@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) {
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 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) {
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

absolutely amazing!!! thank you dearly

jewelcam

Posted: 4/24/2014

@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?

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

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

@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

@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

Wow Jrgweb, you are amazing :)

Thanks so much for this!

hooman

Posted: 5/4/2016

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

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