Jquery :: Slide Down Navigation Menu?
Jan 23, 2009
I am looking to use JQuery which I am really new to and get my navigation submenus to slideDown when the parent is rolled Over. I have multiple parents and children or sub menus and want them to activate individually but without repeating the JQuery over and over again for each.Obviously the goal is to also slideUp on the mouseOut event.Here is the code that I have so far:
<style type="text/css">
span.position
{vertical-align: top;
[code]....
View 1 Replies
ADVERTISEMENT
Feb 2, 2011
I'm having a little trouble with 2 differentJS scripts. I have a drop down slide menu and a parralex slide gallery. Both work on separate pages and puton the same page they still work however the submenu of the slide down menu does not. if I remove the style sheet that belongs to the gallery
Then the munu works, however (obviously) the page layout goes wrong. if i remove<h1 class="title">Alex Holland Perspective</h1> the menu works however page layout goes wrong andI loose my header
Here is the code.
View 4 Replies
View Related
Jun 17, 2011
I'm trying to manipulate the functions of Codaslider for a layout. What I need is the ability to use an image for slide dynamic slide navigation. I've solved the issue for dynamic hashing, however I'm stuck at modifying the HTML. I've tried a few things but I figure this is the easiest way...
[Code]....
View 9 Replies
View Related
Aug 24, 2010
Im a starting graphic designer, 21 yrs of age and just rolling into this webdesign industry. Ive come a long way, do have some knowledge.. but when it comes to complicated things like JS I often visit knowledgeable forums like these.
I hope I can contribute into making this community richer.
Now, Ive implemented this slide out menu succesfully before, only now it seems that ive mistaken somewhere. The menu just pops out instead of sliding out like it should.
Code:
<script type="text/javascript">
$(document).ready(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
[Code]....
And if you want to see a working example of how it should be look here.
View 4 Replies
View Related
Jan 19, 2009
Ive been working on a site with a dropdown menu. its styled with css and animated with java i would like to add support for keyboard navigation.
var DDSPEED = 5;
var DDTIMER = 5;
main function to handle the mouse events [code].....
View 1 Replies
View Related
Dec 27, 2011
I am working and designing a website, and have put the simple JQuery drop menu from css tricks on my website, but every time i zoom in and out the website using ctrl +&- the site gets smaller or larger however the navigation moves and some bottoms from the menu drop down to the left or right under the first or last buttons, so does anyone know how i can fix and block the menu from moving around using HTML and its own CSS Style page, let me know.
click on the link below to see the demo for the navigation.
[url]
View 2 Replies
View Related
Jan 14, 2012
I have a navigation menu. Right now, when you hover over a menu item an image flies over the top of it. This image is set in my CSS as "nav li em". However, that image flies in to the same spot for every menu item. This is what I would like: When you hover over Item 2, em2 is invoked for the FlyIn. When you hover over Item 3, em3 is invoked.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]" xml:lang="en" lang="en">
<head>
<title>help</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hover(function () {
$(this).find("em").animate({ opacity: "show", top: "-34"}, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText); .....
View 4 Replies
View Related
Oct 25, 2011
I have developed a navigation menu and it works perfectly except for one problem. When hovering from the main menu to the submenu, the submenu fades out then fades back in quickly. I have no idea what is causing this. Here is my code:
var sub_menu_hover = 0;
var main_menu_hover = 0;
$('.showcase_submenu').hover(function(){
[code]....
View 3 Replies
View Related
Nov 29, 2011
I'm trying to include a navigation menu where the viewer hovers over the link such as Main or Home and somewhere else in the page it display an image.
Similar to this : [URL]
But instead of pixels, I would just like images to be displayed.
View 2 Replies
View Related
Jun 10, 2010
On this link you will see my test site:At the moment I am not too happy with the animation on the navigation menu.As you will see as you click quickly through the various links the animation is very jumpy because of the way I have coded it.Also when you click on the gallery page and then select the various gallery images, the animated ball moves all the way to the left.Here is the JQuery code for the animation:
PHP Code:$(function() {//event object (notice it in the parameter list) contains data about the event handled$(".linkbox").mouseover(function(event){//selectedDiv is the clicked object, so you can do what ever u want on the box clicked ;)var selectedDiv = $(this);var divPosition = selectedDiv.position();var divPositionLeft = divPosition.left;$(".circle").animate( {"left": + divPositionLeft}, "100" );})})function movebacka() {Each page has an include file with the nav menu contents, so every time you click a link in the nav menu, a new page has to load, therefor causing the jumpiness in the animation. What are the best ways to resolve these kind of issues.
View 6 Replies
View Related
Mar 9, 2011
I am trying to make a navigation menu that when a link is clicked, loads content into a hidden div, then shows the hidden div, then changed the class of the list item. If the same link is clicked again the class reverts back to what it was before and then the content div becomes hidden.
[Code]...
View 3 Replies
View Related
Apr 29, 2010
I've a navigation menu that has some sub-menus and I want to show them only after a click on the parent link. But every click on the sub-menu collapse the menu again.
$('ul#nav>li:has(ul)').click(function() {
$(this).children('ul').slideToggle();
return false;
});
<ul id="nav">
<li><a href="#Home">Home</a></li>
<li><a href="#Products">Products</a>
<ul>
<li><a href="#Apples">Apples</a></li>
<li><a href="#Bananas">Bananas</a></li>
</ul></li>
<li><a href="#Services">Services</a></li>
</ul></div>
When I click Products and than Apples it hides the level 2 UL. But it should go to #Apples instead. I can not change the HTML since it comes out of a CMS. So I have to deal with that structure. How can I prevent the level 2 UL collapses when I click on Apples or Bananas?
View 1 Replies
View Related
Feb 26, 2010
This is my HTML code:
Code:
<div id="vnav">
<ul>
<li>
<a href="index.php">Home</a>
[code]....
It's basically a vertical list of links, with more specific links hidden inside categories. When you click a category, the specific links should slide down. This is the JS/jQuery part:
Code:
<script type="text/javascript">
function slidey() {
$("#vnav ul li ul").slideDown("slow");
[code]....
so the problem here is that when you click a category, it expands ALL sub-categories and it's supposed to just expand the sub-categories related to the section clicked.
View 4 Replies
View Related
Sep 21, 2009
I found this tutorial: [URL] I want to do this but slide left to right, rather that up and down. how might this be done? I'm a bit new with my jquery.
View 24 Replies
View Related
May 16, 2011
My original post is at [URL] I would like to make the dropline submenu appear to slide down instead of just pop in.
View 1 Replies
View Related
Sep 12, 2009
I am trying to add a class to my menu for the page it is currently on.
I followed this example: [url]
But I am not able to make it work at all.
Here is my HTML:
To make the nav element highlighted, the list item must have a class of 'hover' like this '<li class="hover">...'
And here is my jQuery:
The script is not applying any CSS to the list elements. I tried different combinations, tried to add a class to the a element by removing parent(), but nothing is triggering.
View 1 Replies
View Related
Jun 4, 2011
My goal right now is to make a two-part navigation bar where you don't have to reload the whole site, when you click on a link. The navigation bar consists of two <ul> lists with <li> float:left and <a> display:block, so I basically have two lines. It's probably easier to understand if you see it for yourself: jsfiddle (had to change the css style, because I use .less but it works)
When you load the page it's just like that, you have your main category (A,B,C,D,...) and the sub-category (A1,A2,A3,...). What I want: If you click on B, the sub category changes to B1,B2,.... If you click on a sub category the site loads the requested page (with ajax = best solution?!)
My thoughts
At first I thought about just changing the name and href attribute of the second list, but the main categories have different amounts of sub categories, so I would need to add or remove <li>'s. Then I thought about using .load() but I somehow screwed up (of course) and the loaded <ul> doesn't have any css style (wrong order?) and I can't see anything. (with a loaded test.html site containing only the word "test" it worked) Is ajax "overkill" as a solution?
CodeIgniter and the URL
I use CodeIgniter (a PHP framework) for the website and URLs like this: www.example.com/maincategory/subcategory (e.g. example.com/A/A3) That's no problem at all, if I don't use any javascript and reload the whole site every time. But is it possible to change the URL with jQuery when the user clicks through the navigation bar? You click on B, the URL changes to example.com/B all the subcategories change to B1,B2,...When you click on B2 the URL changes to example.com/B/B2 and the site loads the requested page (I guess with ajax, so the navigation stays the same?!)
Minor problem: when you load the site, click on B, then B3 for example, you would get the url example.com/B/B3. If you now save this link, close the site and reopen it with the link, CodeIgniter would load the right site and everything, but the navigation would show A1,A2,.. in the sub category.
Hover vs click
Almost every page where I saw this kind of menu they used hover to change the sub category. But I thought click would be better, so you don't have to avoid touching B,C,D,.. if you want to go from A to A9 for example. Only downside is that you have to click before you see the sub categories.
Summary
A two part navigation menu you can use without reloading, changing URLs (when possible) and probably ajax to load the actual content.
View 2 Replies
View Related
Jul 11, 2011
I have implemented Superfish in SAP Portal. there is a small issue when I take a print using the browser's print option. When I try printing the Web Page from the browser, the Top Level Navigation Menu appears as a list of links (vertical). This is happening in both IE as well as Firefox.
I have seen the same issue in the website from where I downloaded Superfish :-|
1. Goto: [URL]
2. Click on 'Print Preview' button in your Browser.
3. The Superfish Menu below the text 'The result:' will appear as a list of links in the print preview.
View 6 Replies
View Related
Oct 17, 2011
I'm looking for a menu like the white and grey one on the left of the following page [url] how to find something similar to use?
I don't mind about the bottom box containing the link description, I don't think this would help the navigation...
View 3 Replies
View Related
Aug 31, 2010
Is it possible to make a sliding navigation menu with a dropdown list. Here is an example of the menu I am referring to: [URL]
View 2 Replies
View Related
Oct 25, 2011
I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...
Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>
<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.
View 9 Replies
View Related
Oct 1, 2010
I'm looking for a configuration where the next slide only appears when a menu item is clicked.
View 6 Replies
View Related
Oct 20, 2011
Does anyone know if there are useful scripts in jQuery that allows me to create a page slide effect like this website?I think the logic behind it is that it loads every single web page of the entire website first, pans them out horizontally, then shifts the page left or right X amount of pixels depending on which link is clicked. I'm pretty new to javascript so I'm not sure where to look, and I don't understand half the code by looking at the source code either
View 1 Replies
View Related
Dec 1, 2010
im looking for a (jquery plugin based) menu, which does not drop down like common <ul>-<li>-menus, but get pulled up like the windows startmenu (starts from bottom, slides up).i want to fix this multi-level menu bar to the bottom of the "viewport" (position: fixed;)i googled for hours but did not found a implementation nowhere...
View 2 Replies
View Related
Jan 9, 2010
I want a menu at the top of the page. When I press a button in the menu the content of the page slides up, the content changes and it slides down. I've done this so far, but how can I do a more dynamic solution without having different divs for each menu item?
JS:
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#f1').click(function() {
a("1");
});
$('#f2').click(function() {
a("2");
});
$('#f3').click(function() {
a("3");
});
function a(info) {
$('#content').slideUp("normal");
document.getElementById('content').innerHTML = info;
$('#content').slideDown("normal");
};
});
</script>
HTML:
<div id="f1"><a href="#">Menu 1</a></div>
<div id="f2"><a href="#">Menu 2</a></div>
<div id="f3"><a href="#">Menu 3</a></div>
<div id="content">Chose something in the menu</div>
View 5 Replies
View Related
Jun 30, 2009
How can I get rid of the slide effect on a basic horizontal menu? I love the way the "basic" example works but I can't mimic it without having the text all slide to right and re-sizing the box.
View 2 Replies
View Related
