akstgsb
|
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
|
@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/
|
|
|
@jrgweb +1
Good one. Thanks much.
You could consider putting this in 'User Tips'. I would [consider it, I mean].
|
|
ftzptr799
|
@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
|
<a href="http://imgur.com/0VQ22vl"><img src="http://i.imgur.com/0VQ22vl.png?1" title="Hosted by imgur.com" /></a>
|
|
jrgweb
|
@Robert Lowly - Add width:100%; to .art-nav class
|
|
Azari
|
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
|
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
|
@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
|
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
absolutely amazing!!! thank you dearly
|
|
jewelcam
|
@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
|
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
|
@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
|
Wow Jrgweb, you are amazing :)
Thanks so much for this!
|
|