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="Hosted by imgur.com" /></a>
 
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??
 
Robert Lowly

Posted: 5/17/2014
Quote message 

Wow Jrgweb, you are amazing :)

Thanks so much for this!