PDA

View Full Version : Smooth Navigational Menu (v1.5) want to display as dropline side by side



jqdesigner
12-29-2012, 11:29 AM
1) Script Title: Smooth Navigational Menu (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:

Hi I am using the above menu and it is working fine.

I just want to change the drop down menu in to dropline like in horizontal side by side way not in verticle was for both 2nd and 3rd level dropdown.

Any idea how can we achieve that.

Any help shall be really appreciated.

Thanks


Thread also referred to by original poster: http://www.dynamicdrive.com/forums/showthread.php?72449-Help-with-Smooth-Navigational-Menu-%28v1-51%29

jqdesigner
12-29-2012, 11:31 AM
or if any help to make this menu on click instead of hover.

http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/

will really appreciated.

Thanks


I am trying css changes to float left but it is not working.

Beverleyh
12-29-2012, 12:59 PM
Please refrain from posting multiple times about the same issue - 5 times in a few hours is rather excessive.

Have you tried getting the buttons in a horizontal line by targetting the li elements in the CSS and setting them all to "display:inline;"?

Please post a link to your website if you need more help.

james438
12-29-2012, 07:17 PM
Hi, I deleted all of the duplicate posts. Beverly is correct here. Please limit your questions to just one post in one thread or as few posts as needed to get your point across. When you post multiple times moderators tend to think that it is spam. Posting your question just once also helps to keep things organized and it is easier for members to help you with your problem.

jqdesigner
12-30-2012, 04:40 AM
Hi Sorry for the multiple time post actually when I post It didnt show in the thread it is posted so I posted again and after displaying in the post I dint know where to delete it.

sorry for the inconvenience.

james438
12-30-2012, 05:39 AM
No worries. I figured it was probably something like that, but in case it was something else it was a good idea to let you know lest someone else get the wrong idea ;)

Other than that welcome to the forums! I hope you enjoy your stay and get the help you are looking for.

jscheuer1
12-30-2012, 03:48 PM
OK, I worked it out using the jQuery Drop Line Menu. Use this modified version of the droplinemenu.js script (right click and 'Save As'):

4872

Just remember that unlike the hover version of the jQuery Drop Line Menu, the header LI A tags (those are the ones that get the little arrows) cannot be linked outside the page because you cannot click to open a drop line and navigate to another page at the same time. In fact, the way this modified version is written you should make all of the header LI A tags have an href of "#".

A header LI tag opens a drop line, so not only can it be identified by the little arrow it gets when the page is read, it also can be identified by the fact that it has a UL tag as a child just after its A tag.

Any questions, just let me know. But if you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

jqdesigner
12-30-2012, 07:59 PM
Thank a lot John,

Your code realy help it works fine, I have some more quries I will ask after posting the link my FTP is not working now.

but Thanks again you are great and A very very happy new year to you.

Thanks

jqdesigner
01-06-2013, 08:30 AM
Hi John,

Thank you very much for you help the code is working fine I m unable to upload it to any publish site for your review.

I need some more help.

This menu now working on click as desired now I want to apply css style on it.

I want different background image for second level and another differe background image for third level.

same like http://www.peugeot.co.uk/new-cars/

I am trying in the dropline css file but when I apply on second level menu it applies on third level as well.

Any Idea how can we apply different background on different levels.

Also can we make it same like my above example link like 2nd level and 3rd level menu start from the center of the page instead of the top main link left side.

Any help shall be really apreciated.

Thanks

jqdesigner
01-06-2013, 09:28 AM
Hi John

Here is my example link.

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


Also I am trying to make the active link highlighted through CSS not successed any idea how we can have the active link highlighted, if we are on 3rd level the first and second level menu should highlighed so we know how where we are in the navigation?

Please check.

Thanks

jscheuer1
01-06-2013, 07:06 PM
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'):

4880

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
01-06-2013, 08:22 PM
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
01-06-2013, 08:56 PM
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/side/dropline2/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
01-07-2013, 05:22 AM
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/208/5-door/#!explore/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
01-28-2013, 04:46 AM
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
4905

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
01-28-2013, 03:27 PM
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 (http://home.comcast.net/~jscheuer1/side/dropline/click/droplinemenu.js)

Backup what you have first.

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

jqdesigner
01-29-2013, 01:16 PM
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
01-29-2013, 04:13 PM
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
01-30-2013, 06:19 AM
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
01-30-2013, 03:35 PM
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 -->