I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? [URL]
View 2 RepliesThe 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 trying to turn a single level flyout menu into a multi level one.
It uses a dt for the title, and a ul within the dd for the menu items. The dd opens to the right of the dt.
The problem is that the second level menu (a dl within an li within another dl) [URL] - flyout4 & subflyout5.
The z-index is increased each time. I just can't figure why the area is limited.
javascript, css & html follow -
Code JavaScript:
/** FLYOUT = vertical dropdown **/
var Flyout = {
DDSPEED:10,
[Code].....
How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: [URL]
Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row.
Tested in IE6 and Firefox. Hover on main menu items, sub-items are displayed. Main menu items are not required to have sub items.
MenuTree.xml
<?xml version="1.0" ?>
<menu>
<main>
<text>First</text>
<sub>
<text>Anything</text>
<link>links/anything.html</link>
</sub>
<sub>
<text>Everything</text>
<link>links/everything.html</link>
</sub>
<sub>
<text>Nothing</text>
<link>links/nothing.html</link>
</sub>
</main>
<main>
<text>Second</text>
<link>links/apples.html</link>
</main>
<main>
<text>Third</text>
<sub>
<text>Something</text>
<link>links/something.html</link>
</sub>
</main>
<main>
<text>Fourth</text>
<link>links/oranges.html</link>
</main>
</menu>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var response = "";
var nContainer = "";
var mainItemsText = [];
var mainItemsLink = [];
var subItemsText = [];
var subItemsLink = [];
var mainItemsWithSubs = [];
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
function hideSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = 'none'
}
}
function showSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = ''
}
}
function setHoverDisplay(){
if (IE)
{
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
}
}
}
else {
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
}
}
}
}
function buildMenu(){
nContainer = document.getElementById('menuContainer');
mainItemsWithSubs = [];
var n = 0;
for (i=0; i<mainItemsText.length; i++)
{
var nItem = document.createElement('dt');
var nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(mainItemsText[i]));
if (mainItemsLink[i] != undefined)
{
nLink.setAttribute('href',mainItemsLink[i]);
}
else{
nLink.setAttribute('href',"#");
nLink.onclick = function(){return false;}
mainItemsWithSubs[n++] = i;
}
nContainer.appendChild(nItem);
}
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (s=0; s<subItemsText[i].length; s++)
{
nItem = document.createElement('dd');
nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(subItemsText[i][s]));
nLink.setAttribute('href',subItemsLink[i][s]);
if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
}
}
setHoverDisplay();
}
function parseResponse(){
var n = 0;
var s = 0;
var mainItems = response.getElementsByTagName('main');
if (IE)
{
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].firstChild.text;
if (mainItems[i].childNodes[1].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[1].text;
}
n++;
}
}
else {
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
if (mainItems[i].childNodes[3].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
}
n++;
}
}
for (i=0; i<mainItems.length; i++)
{
if (IE && mainItems[i].childNodes[1].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
{
subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
}
s++;
}
if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
var subs = mainItems[i].getElementsByTagName('sub');
for (n=0; n<subs.length; n++)
{
subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
}
s++;
}
}
buildMenu();
}
function getMenuTree(){
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
response = request.responseXML;
parseResponse();
}
else {alert('Error MenuTree.xml '+ request.statusText)}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
request.open("GET", "MenuTree.xml"+forceGET, true);
request.send(null);
}
onload=getMenuTree;
</script>
<style type="text/css">
dt {background-color:#b0c4de;text-indent:5px}
dd {background-color:#87ceeb}
a {color:#00008b}
</style>
</head>
<body>
<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
</div>
</body>
</html>
I've been asked to create a site for my younger sister and she's requested a horizontal pull-down menu using graphics for the links instead of simply text. This is my first time trying to code such a menu (topic not covered in class) and I'm having some difficulty getting it to work completely.
Right now it's partially working. The various sub menus do show up when clicking or rolling over the previous menu item. However all menu items past the one clicked jump down one line when expanding instead of simply showing the sub menu under the main line up. The rollover also has issues but mostly because I haven't finished coding the onmouseout part, so it doesn't go away. I'm trying to get the main pull down working before tackling that part. Below is the JavaScript function I'm trying to use as well as a part of the menu. I've already spent months trying to get this working and am not making much headway.
[Code]...
I run an educational website with a CSS/JavaScript based menu that is right now only single level. I am trying to convert it over to multi level. I have tried a few other multi level menus but I have done a lot of customization in terms of appearance for this current menu, so none of the new ones looked right.
Here is the site: [url]
Here is the CSS: [url]
Here is the JavaScript: [url]
I have a 3-level menu using JQuery-Superfish. I would like to hover over the top-level menu item and have BOTH the 2nd and 3rd-level menus open automatically.
View 1 Replies View RelatedI have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick. I have taken from....
Code:
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
[Code]...
Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.Here is my HTML
<div class="header-nav">
<ul id="navigation">
<li><a href="">home</a></li>
[code].....
I have inherited a site with superfish used as the menu which seems to work fine except that I wish to disable the links at the top level so that a click on the top level of the menu goes nowhere only clicks on the sub menu list. At the moment each top level menu item is a section and the sub menu list categories. There is nothing I need or want to place in the Section heading so a link from this is unnecessary but at the moment clicking on the top level (section) leads to a page i do not want.Example:-Top Level Section (no link to anywhere)2nd level Category 1 (link to article)3rd level Category 2 (link to article)etc.
Is this possible to do. I feel sure it should be as it is a normal facility on a drop down menu but I cannot find anywhere in the options which enables this. I am not sufficiently conversant with CSS to try playing with the current layout which other than this seems to be working ok.
I am really pressing on to finish this home page menu, and I'm trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreview. The other thing I'm trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item's hover.This is my JavaScript:
Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
[code]....
I am a newbie to Sitepoint, and relatively new to CSS and JS. I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The menu looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. But if you scroll really slow, they stay up. I am trying to avoid re-doing the whole thing. Both the CSS and the HTML are below. The site is computerdepot-online.net
[Code]...
I've been working on a vertical reveal menu. Right now it
works ok with CSS. But what i'd like it to do is when you mouse over,
reveal the menu and have that menu stay open until the user mouses
over another menu item. Right now it's a bit jumpier than i'd like it
and would like to basically have it stay open on a mouse out event,
again until it hits another menu item. Code:
I have implemented a jQuery hover top level menu & it is working fine in bothIE 7& 8. However, when I am executing the same code in Mozilla Firefox, it is not rendering hover effect at all. Also, I am adding a <span> using jQuery if JavaScript isn't enabled. This span is also not getting added in Mozilla.
Following is the code that I am using.
<script type="text/javascript" src="[URL]"></script>
<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.pnode li a").mouseover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
I came to know that IE & Mozilla see .parent differently.I have tried everything but not able to get this stuff working in Mozilla. I am using Firefox 3.5.5 version.
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.
I want that when i click on a other main item that the other will close. Now it still keep open and then ill get a long menu list. How do i do it , i dont have js experience.
[Code]...
I would like the second level of buttons (submenu) to disappear once the cursor is no longer hovering over them - rather than appearing until another button in the top level is hovered over. modify the javascript below to do that?
[Code]....
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.
I'm currently trying to build a vertical mega menu as all the ones on the net seem to be set up for horizontal menus. I'm struggling a bit on a certian point as I'm not a very strong Javascript user.It places the mega menu under the button but i want it to appear to the side of the button and be flush with the top of it. I have made it appear to the side but I cant seem to make it run flush with the top of the button, it appears at the bottom of the button.The buttons are 142px wide and 28 in height.
View 1 Replies View RelatedIf you look at this test page (http:[url]....), you see a vertical image menu. This menu is originally from http:[url]....But... how can you get it to 100% heigh?
View 5 Replies View RelatedThe objective is to create a stacked, inline vertical menu. Upon mousing over a menu option, a series of sublinks (children) presents itself immediately beneath the parent. The children push the rest of the menu options downward. We're ok up to this point.
Should the mouse pointer point to another menu option, the children of the former menu option pointed at disappear and the new children are displayed. We're still ok. Here's the code I use to accomplish this: Code:
I have an horizontal menu,but the menu items all are in image format.when mouseover on it, it display another color means it is in active state.(this is also an image of another color to differentiate active or not). Now i want to add vertical sub-menu of diff levels to the already existed menu(i.e original menu is of image format). Is it possible to add the sub-menu items to the image menu? if possible, i want the solution for it.
[Code]...
I have a nav menu with lists within lists (3 deep), with pattern as follows:
[Code]...
When a parent link is clicked it reveals the sub-list. What I would like to do is hide currently visible lists when another is revealed. I've tried to use .siblings but it dunt werk (or, at least, I can't make it happen!)
I wonder if you can help? I've implemented a ready made JavaScript vertical toolbar into my Web site but have problems with positioning. It only has by default absolute positioning parameters and I need to change them to relative as whenever the browser is resized the menu stays at the same place on the screen. I was told that using <DIV> tags can help, but I have no idea how to do it.
Can anyone please submit a working example code of asigning relative parameters to the menu?
I'm looking to implement a Collapsible vertical navigation script into my site - i'v searched the forums and other various sites and found scripts that where close to what i wanted to achieve but missing various elements.
I'v attached an image to this post to show you what I had in mind and hopefully someone can help me (hopefully using css and as little javascript as poss - or perhaps using DOM?)