Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

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

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Code:
     . . . 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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jqdesigner; 01-06-2013 at 07:32 PM.

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Code:
    .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:

    Code:
    .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:

    Code:
    .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;
    }
    Last edited by jscheuer1; 01-06-2013 at 08:50 PM. Reason: saw additional change required
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #14
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #15
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Click image for larger version. 

Name:	MN.jpg 
Views:	74 
Size:	59.3 KB 
ID:	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

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    <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.
    Last edited by jscheuer1; 01-28-2013 at 02:42 PM. Reason: update for script
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Quote Originally Posted by jscheuer1 View Post
    For backward compatibility with outdated browsers like IE 7, the script requires jQuery 1.3.2. Change:

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

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #19
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #20
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
        <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 -->
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 18
    Last Post: 06-28-2013, 03:01 PM
  2. Trying to get two calendars to display side by side
    By Mark Ellis in forum JavaScript
    Replies: 1
    Last Post: 08-01-2012, 10:14 AM
  3. Display 2 DIV's side by side in IE8/9
    By polenz in forum CSS
    Replies: 4
    Last Post: 07-12-2012, 06:28 PM
  4. Replies: 2
    Last Post: 09-17-2011, 10:15 PM
  5. How do I make a right side Smooth Navigational Menu (v1.5)?
    By newbi462 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-09-2011, 01:41 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •