JQuery :: Moving Menu Css - Create A Menu With Submenu
Jan 31, 2011I want create a menu with submenu. I want that when I hover menu item, it goes up and then submenus items appear. It is possible?
Example:
I want create a menu with submenu. I want that when I hover menu item, it goes up and then submenus items appear. It is possible?
Example:
I have trouble with SuperFish Menu, of course it looks very nice and is good solution, but I am not advanced in CSS language.how to change space between menu and submenu in Navi-bar type menu? Now sobmenu hide part of menu, I have to must space.....
Attachments
superfis.JPG
Size : 11.4 KB
Download : 306
I needed a sidebar menu that, when a user clicks the <h3>, a submenu expands. When the user then clicks on a different menu item, the previous submenu disappears meaning only one submenu can be visible at one time.
Now the code I have at the moment (from jQuery forums) works. It now needs a bit more refining so that it works the way I intend.
When you first load the page, all of the submenus are collapsed which is a real pain as each submenu has 20 - 30 selections.
Is there a way to have them all hidden initially?
Is there a way to get an open submenu to close by clicking on the H3 title again?
Since the site is local only, I posted up a sample on my JSfiddle account.
[url]
This one, which I also found on google, did what I wanted, but without the smooth slide animation. - [url]
When you then click on one of the H3's, it kicks into action and works great!
I actually want to make a horizontal drop down menu with a sub menu.As far as I have researched, I think that it can be done by JavaScript. I have searched for some java scripts but they are very long and complex.
That made me wonder that for a funcitonality like a Drop down is so complex?
So here is my question : Is there any JavaScript that can be applied for drop down menu exclusively? Which just presents logic of drop down solely?
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.
I am trying to create a specific menu using jQuery where i want to toggle a clicked menu item. I used toggleClass to accomplish this. All fine and well, but what i want is that once i click a menu item, the previously clicked item should have the active state/class toggled off.. The menu is variable. (I tried and tried and searched all over the internet, but i cannot find it... spent 5 hours trying to combine various selectors and if/else statements, but it did'nt work.)
View 1 Replies View RelatedI'm struggling around to show submenu on mouseover of menu-div. I found a solution to show each children of one menuitem, but I wont to show the whole submenu-strukture of all menuitems. Here is what I've done till now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns ="[URL]">
<head>
<meta
http-equiv ="Content-Type"
content ="text/html; charset=utf-8" .....
So when I hover over li.first I will get all submenu-items of the first heading! Is it possible to mouseover the div#navi or the ul#nav to get shown all submenu-items from every menuheading?
I tried something like this, but of course it doesn't workjQuery(document).ready(function(){
jQuery(".first ul").hide();
jQuery(".#nav").hover(function () {
jQuery(this).children(".first ul").toggle("slow");
});
});
I'm wondering how to modifiy the vertical menu of superfish to let the submenu appear horizontal next to the parent menu element:123 3a 3b 3c45I just spent some hours searching on Google andplayed around with the CSSbut could not manage to fix it.
View 1 Replies View RelatedI have a horizontal menu with some subitems. At the moment when I click on the main menu the submenu is being shown and it remains open even if I click anywhere on the page. But here is the tricky part, when I click on a menu item (in the submenu) I want the submenu to display the items on which the page is.For example the menu looks like this:home
page1
page1a
page1b
[code]....
I'm almost done customizing the Superfish jQuery menu to fit my web site theme. I have all of the menu hover and submenu hover styles in place, but I'm having a problem with the color of the top-level menu item's font when the submenu is expanded. The active top menu item's background matches the hover color, but when I hover overa submenu item, the font color reverts back to the original (non-hovered) color. How do I get the top level menu item's color to match its hover color when the submenu is expanded?
The relevant portions of my CSS are as follows:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#8C1C39;
}.sf-menu a.sfHover {
color:#FFFFFF;
}.sf-menu li {
background:transparent;
}.sf-menu li li {
background:#FFFFFF;
}.sf-menu li li li {
background:#9AAEDB;
}.sf-menu li:hover, .sf-menu li a:hover {
color: #FFFFFF;
background:#00207B;outline:0;
}.sf-menu a:focus, .sf-menu a:active,
.sf-menu li li a:hover, .sf-menu li.sfHover {
background:#8C1C39;
color: #FFFFFF;
outline:0;
}
Attachments
TopHover.jpg
Size : 10.86 KB
Download : 505
SubHover.jpg
Size : 9.33 KB
Download : 510
<script type="text/javascript"
The problem i have is when i try to move my mouse down too the menu that slides on mouseover. The moment i remove my mouse from the menu it moves away again(just like i made it).
So my question is: can i make a div that pauses all script? That way i could do that with menycontent and force the menycontent to show.
I have inherited some code that changes the behavior or menu links with submenus to open the submenu but I need it to both open the submenu and go to the link location.
Here is the code:
$('#leftNav #menu li a').click(
function() {
$('#leftNav #menu li a').removeClass('selectedAccordion');
$(this).addClass('selectedAccordion');
$('#leftNav #menu ul.currentnav li a').removeClass('selectedAccordion');
$('#leftNav #menu li ul li a').removeClass('selectedAccordion');
//$(this).parent('li').addClass('selectedAccordion');
var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))){
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
if(checkElement.parent().parent().parent().is(':visible')) {
checkElement.slideDown('normal');
return false;
}
$('#leftNav #menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}}
How do I put back the behavior to open the submenu AND go to the link location? I found I could add location.href = $(this).attr('href'); and go to the correct, but then the submenus slideUp and are hidden again. I can't figure out why changing the page closes the menus.
If I select one of the menu items the submenu appears just fine, my only
problem is that If I point the mouse curser away from the whole menu the
submenu is still shown, obviously if I click once with the mouse outside the
menu the submenu disappears. So I need some kind of remove-submenu function
when the mouse pointer is not pointing on menusubmenu....
I have built an expandable menu that displays some categories and subcategories. The menu is populated from a MySQL DB and I'm using PHP to configure the data for the Javascript menu. All of this works correctly.
There are 2 options when using the menu.
1. Click the arrow icon next to the category option. This opens the subcategories for that category while remaining on the current page.
2. Click the category title (text link). This brings you to the category page.
When a user clicks the category title to go to the category page, I want the subcategories for that category to be open when they get there.
Everything seems to be working correctly, until I get to the line to open the subcategory.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.
So, here is the code I have so far:
Code:
<div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
[Code]....
Where do I need to look to find such a script?
Ive been looking for 3 days now and I cant find something that will have all of those.
I need a floating horizontal dropdown menu, and submenu with mouse over description of the site.
EX: menu 1
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.
When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.
So, here is the code I have so far:
Code:
The javascript:
Code:
And the css:
Code:
version of Apycom's jQuery menu; you can find itat http://apycom.com/ and it is looking really good.I have uploaded files, and published it on a test site - www.flexin.beUnfortunately, some of the submenus starting from the second that haschildren elements, it adds the item on the top level in InternetExplorer.Does anyone on this list has any experience with this library?
View 2 Replies View RelatedMy menu navigation(Home, Hosting Solution, etc..)
1. The submenu links need to be centered in the middle of the div instead of aligned to the left.
2. Can the submenu links have a rounded box appear under them, instead of being underlined links. Like these at the top: [url]
3: The top tab needs to stay gray/active/on when the mouse is moved down to the submenu or when it is the active button.
Here is the link of the site [url]
The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.
View 2 Replies View RelatedI am working on getting this script to work on my page but can't get the hovered anchor to maintain it's state when moving to the mega menu. I'm hoping to have a tabbed look to the drop down much like at[URL]..
However, being new to jQuery this looks a bit daunting the way this script was written. I've seen examples coded much more simply than this one. This one seems like the author was trying to obfuscate the intent behind the code.
Is there an easy way to modify this code to allow for the anchor that triggers the event to maintain it's hover state even when moving to the drop-down?
I am trying build tripple drop down list using JQUERY .still i can't do it.1st drop down menu(click option )---->load 2nd drop down in to same page----->load 3rd drop down in to same page(1st menu selected value go to jquery function and it is parsed to
<html>
<body>
<script type="text/javascript" src="jquery-1.4.2.js">
[code]....
I use Superfish menu basic style in my small FOSS project.Question: How can I make a horizontal Superfish menu, floating, likeis[URL]
View 2 Replies View RelatedI am using the jQuery plugin to create slideshow and also a accordion menu.
Slideshow: [URL]
The accordion menu is not working if the slideshow is working. I am new to this jQuery world.
The below is the HTML script
<html><head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="nested.accordion.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#main").accordion({ .....
In the above script, slideshow is working fine but the accordion is not working. If I comment the lines 5, 16, 17,18 then the accordion is working but slideshow is not working. There is no errors thrown.
I am using JQuery to create sliding line under menu effect. I have written the code but can't figure out couple of things. I have attached my code. I would like to make the sliding effect more smooth but the most important thing that I can't figure out is how to make the scroller div scroll back to its original position on mouse out.
[Code]...
How would I go about creating a menu like the one that this website has? [URL]
View 2 Replies View Related