Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Problem with jQuery Multi Level CSS Menu #2

  1. #1
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Problem with jQuery Multi Level CSS Menu #2

    Hi,

    I'm new to this forum and have been using dynamicdrive for a long time now and this is my first problem.

    i've tried to set that jQuery Multi Level CSS Menu #2 on one of my websites and it doesn't work properly on Firefox3 but however it displays just great on IE7

    do you have any suggestion at what may be the problem ?
    the adress of the website is http://endoscopie.awardspace.com/php...page=bienvenue

    The website is in french as you can see.

    The problem i'm having is that the menu is starting only half a way from the full width of the div when i look at it from firefox

    The original code is from there http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    Thanks in advance

    nicolasp

  2. #2
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I can get this work on the desktop no matter how I set up the directories but, as soon as it is uploaded it just displays the Header. No drop downs.

    This will not work online even if all are sitting in the main directory or I hotlink them all with full paths.

    What's wrong?

  3. #3
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    webskipper: Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  4. #4
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    here is my css for the div of the menu:
    the javascript is the same than the one that can be downloaded and the menu is displayed with a php include

    Code:
    .submenudiv {
    	position:relative;
    	margin-top:0px;
    	margin-left:auto;
    	margin-right:auto;
    	width:75%;
    }

    and the css for the menu itself
    Code:
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #d4340c;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #d4340c; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #b82d0b;
    color: #d4340c;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    background: #b82d0b; /*tab link background during hover state*/
    color: white;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid #b82d0b;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #b82d0b;
    color: black;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }

  5. #5
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    webskipper: Please post a link to the page on your site that contains the problematic script so we can check it out.
    I figured it out. Lightbox was interfering with the dropdown effect somehow. I will have to resort to using one of the image effects on DD so that I can use this.

    Thanks for the coding as it was easy to convert my vertical list menu into the horizontal menu.

  6. #6
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Half way down the page? Reload. Or indented too far?

  7. #7
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is mine and is based on width= 100%. Divide your categories from 100%.

    .menu
    {
    font: bold 11px arial,helvetica,sans-serif;
    width: 100%;
    background-color: #000;
    text-transform: uppercase;
    }

    .menu ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    }

    /*Top level list items*/
    .menu ul li
    {
    position: relative;
    display: inline;
    float: left;
    width: 16.6%;
    text-align: justify;
    }

  8. #8
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    when i said half way, i meant half of the width of the screen

  9. #9
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i just fixed it. if anyone has the same problem, here is the solution.
    i just added
    Code:
    float:left;
    to the following css classes
    Code:
    .jqueryslidemenu{
    
    float:left
    }
    
    .jqueryslidemenu ul{
    float:left
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    margin-left:0px;
    float: left;
    
    }

  10. #10
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Continued Thread Inquiry

    Searched and found this thread so rather than starting over, please consider my inquiry for new review.

    This question is regarding this menu:

    http://www.dynamicdrive.com/style/cs...s_menu_2/P100/

    I have the menu configured and it looks great. I just need to now customize it.

    I am interested in setting a background image for repeat for this menu. Kind of like this menu:

    http://www.dynamicdrive.com/style/cs...s_indent_menu/

    but without the indent and two images. I just need one static image for the background. I have already completed my image and need to apply it.

    I also want to change the opacity or html color of the drop down menus and their text color as well.

    I also want to chage the height of the menu and the font and size.

    TIA,

    NC

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
  •