Smooth Navigational Menu (v1.5) want to display as dropline side by side

[jscheuer1]

To add different styles to the various levels of drop lines, it's the UL tags you want (additions highlighted):

 . . . p: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}

/* First Sub level Drop Line */
.droplinebar ul li ul {
background-color: red;
}

/* Second Sub level Drop Line */
.droplinebar ul li ul li ul {
background-color: green;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

If you want dropline UL tags at the same level to have different styles, you have to give them each a class name or id and style them that way in the css file.

For the active tab, use this script (right click and 'Save As'):

index.txt

It gives a class of "expanded" to each active LI tag.

So you can style them to be the same as the hover like so, again addition highlighted:

.droplinebar ul li ul li a:hover, .droplinebar ul li ul li.expanded >a { /*sub menu links' background color onMouseover */
background: #242c54;
}

[jqdesigner]

Hi John,

Thanks again for the wonderful support.

I understand the first part which gives different background color to different level and I implemented here

http://www.me-press.com/menu/menu.html

but I didnt understand from the file you have asked to right click and save how to get or add the class expanded to each LI tags.

I want to show the firs main link and the sub level link to be highlighed or some background image so that if I am in third level menu I can understand it is part of which second level and first main level link.

I hope you understand what I am trying to ask.

Thankks

[jscheuer1]

It does it for you. Just use the updated script and use the added style as shown:

.droplinebar ul li ul li a:hover, .droplinebar ul li ul li.expanded >a { /*sub menu links' background color onMouseover */
background: #242c54;
}

Demo:

http://home.comcast.net/~jscheuer1/s...ine2/demo2.htm

Oh and I just noticed that in addition to that:

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

Needs to be changed to:

.droplinebar ul li a:hover, .droplinebar ul li.expanded >a{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

[jqdesigner]

Hi John Thanks again for the support it works.

I need to know i want to place a separator image between each second level link.

like

Link 1-2 | Link 1-3 | Link 1-4 |

like that

And I also want to know if you can help me bulding one more thing it is actually i need to display some content same like the follwoing link

http://www.peugeot.co.uk/showroom/20...e/key-features

I am able to create the left sliding menu kind of thing but as in the above link when you click on key features you will get on the right section some content menu with background image and some text at the bottom and when you click any of the icon link in it it will change the background image and the text with it

I am searching for some jquery code or plugin which give the same functionality but didnt get it yet.

Please if you can guide me for that I really appreciate your help.

Thanks

[jqdesigner]

Hi John,

Thanks for your help your code really help me to build this menu.

This menu is working fine in all the browsers only IE7 it is behaving like that


When the page load first time or when every it load when we click on the first link "Link1" it open the whlole menu in one click not first second level and then third level means on first click it will open the whole menu till third level.

you can check the link as well

http://www.me-press.com/menu/menu.html

but if you click on any other link in top navigation and click it back it works fine or even if I click the first link 2 times then it works fine.

Any suggestion will be really helpful this menu is working perfectly in all the browsers like IE8 IE9 IE10, Fire Fox, Chrome, Safari but only in IE7 it is giving problem and on my site the first link is very important.

Thanks

[jscheuer1]

For backward compatibility with outdated browsers like IE 7, the script requires jQuery 1.3.2. Change:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

to:

<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

But then later browsers will have problems. For that, use my latest version of the script (right click and 'Save As'):

droplinemenu.js

Backup what you have first.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[jqdesigner]

Hi John,

Thanks for the reply.

I have downloaded the new files and replaced it, but still it gives the same result means on first click it is opening the comeplete menu.

http://www.me-press.com/menu/menu.html

Check the link above.

and one more thing I got another requirement where I have to use the same menu but there I m using it the menu as is like on mouse over as it is available on dynamic drive.

there on mouse over also on first link it open the complete menu till third level on mouse over but on other browsers it is working fine.

Thanks

[jscheuer1]

It wasn't either or. You must do both, so you missed a step:

For backward compatibility with outdated browsers like IE 7, the script requires jQuery 1.3.2. Change:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

to:

<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

I don't know if that will fix the one that you're using on hover or not. However the script you downloaded can do a hover menu. Just add hover in the build command:

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu", 'hover')

</script>

It's probably best to use the updated script for the hover one because it corrects the menu behavior in situations where the mouse moves rapidly over the triggers. In the official version that can mess things up at times. And it has the added benefit that, if it detects a touchscreen device (touchscreen devices cannot do hover), it converts to a click version.

[jqdesigner]

Hi John,

Thanks for the reply, you are right I missed that step I have changed it to jquery 1.3.2. and it is working fine in all browsers and also the hover one is working fine I have tested.
But now the problem is on the same site I m using some other jquery scripts also like sliding banner and some accordion menu in inside pages for those I was using the jquery 1.7.1 so now the top navigation menu is working fine in all browsers but none of the other functionality is working like the sliding banners and accordion menu for inside pages.

I want to know can we use different jquery version in a same website. or we can use only 1?

I am searching now for some scripts for sliding banner ans accordion menus which will work in jquery 1.3.2, but if you can give any other solution that will be a great help.

I really appreciate for all the support and help.

Thanks

[jscheuer1]

Well, IE 7 is in rapid decline. MS has made IE 8 a priority update. So unless you never update your computer, or do and specifically refuse to update to IE 8 despite dire warnings from MS, you use IE 8 or greater.

So, you could just skip support for IE 7. You might want to use a meta tag to force IE to use the latest version engine and standards available:

<meta http-equiv="X-UA-Compatible" content="IE=5, IE=8, IE=9, IE=10" >

It should be the first meta tag on the page before any scripts or styles. It prevents IE 8 and greater from using compatibility mode (IE 7 engine optional standards of 7 or the browser's top standards), even if the user has that or full IE 7 mode (IE 7 engine IE 7 standards) switched on in their browser.

Now it's possible to use 2 or more versions of jQuery on a page. But that can get tricky and depends upon all the jQuery code on the page 'knowing' which version it's using. If using just 2 versions, one of them has to be set in noConflict mode and all of the jQuery code that uses the noConflict version must be capable of running in noConflict mode and be setup visa vis its use of jQuery before the other version of jQuery is introduced to the page. Some scripts that can run in noConflict mode cannot run with another version of jQuery on the page though because they might reference jQuery as jQuery either literally or as part of a method after the second version is introduced.

That said, the dropline menu looks like it will run well in noConflict mode. To test it out:

    <script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

	<script src="droplinemenu.js" type="text/javascript"></script>

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- your script that use version 1.7.1 goes after here -->