Advanced Search

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

Thread: Problem with jQuery Multi Level CSS Menu #2

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

    Default

    I use CSS layouts. 5 DIVs (top, footer, sides, and main).

    When I use JQuery Multi Level CSS Menu #2 inside the top DIV, the menu will not drop beyond the top DIV yet if I include it in the main container then I cannot get it to stick to the top DIV.

    Is it possible to get the drop down to overflow into the next div?

    I am currently testing out the CSS Left, Top, Bottom and Right Frames Layout. Is CSS Frames Ok for SEO?

    modelyacht.org / xxx / CSS_Frames4.html

  2. #12
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Styling sub level elements

    Hey everyone,
    I hope I can get an answer for this.. I'm using this menu and it looks great. I have one little problem. I assign a class to each of the top level li's to get the selected state working, but it passes that on to the li's inside it (if it had a sub level menu nested inside it)?

    This is the css code for the selected state:

    .jqueryslidemenu li:hover, .jqueryslidemenu li.sfhover,
    body.index .jqueryslidemenu li.index a,
    body.company .jqueryslidemenu li.company a,
    body.products .jqueryslidemenu li.products a,
    body.services .jqueryslidemenu li.services a,
    body.support .jqueryslidemenu li.support a,
    body.demos .jqueryslidemenu li.demos a,
    body.contact .jqueryslidemenu li.contact a {
    background: #2657ba;
    color: #eeefea;
    }

    And I'd have to just add this to the body tag of each page <body class="classNameOfTopLevel"> to get it to work.

    Any idea's what I need to add/change in my CSS.. I can't seem to figure this out. Thanks in advnace!

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

    Default

    I am using the 2 column liquid fixed layout and the jQuery ML CSS Menu #2.

    Viewing the pages in IE Tester as i work on them on the Mac.

    In all Mac browsers I get the right arrow sitting on the left of any drop downs and the slide out does not work. IE6&7 no arrows.

    I am using the same menu successfully in the main body of the same site on another page.

    Page in question is modelyacht.org/xxx/XNEW.html

    How do I fix that? Did not mess with the JS's.

    IE6 and 7 are whacked. I won't work on those till it looks and fuction correctly in Mac Safari and FF.

    How do I get the top level UL to run across the whole page? I have 11 cells so I choose 9.1%.

    Thanks for any help in advance.

    .topmenu
    {
    font: bold 11px Arial,Times,Monoco,Helvetica;
    width: 100%;
    background-image: url(/css/image/sbg.gif);
    background-color: #003;
    background-repeat: repeat;
    text-transform: uppercase;
    white-space: nowrap;
    }

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

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

    /*Top level menu link items style*/
    .topmenu ul li a
    {
    display: block;
    /*background of tabs (default state)*/
    padding: 4px 5px;
    border-right: 1px #000 solid;
    color: #000;
    text-decoration: none;
    background-color: #003;
    background-image: url(/css/image/buttonup.gif);
    border-left: 1px #000 solid;
    border-top: 1px #C00 solid;
    }

    * html .topmenu ul li a
    {
    /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    text-align: left;
    }

    .topmenu ul li a:link, .topmenu ul li a:visited
    {
    color: #000;
    background-color: #FAFAFA;
    background-image: url(/css/image/buttonup.gif);
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    .topmenu ul li a:hover
    {
    background: 000;
    /*tab link background during hover state*/
    background-color: #FAFAFA;
    background-image: url(/css/image/buttondown.gif);
    border-top: 1px #C00 solid;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    /*1st sub level menu*/
    .topmenu ul li ul
    {
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .topmenu ul li ul li
    {
    display: list-item;
    float: none;
    }

    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .topmenu ul li ul li ul { top: 0; }

    /* Sub level menu links style */
    .topmenu ul li ul li a
    {
    font: normal 12px Arial,Times,Monoco,Helvetica;
    width: 140px;
    /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top: 1px #C00 solid;
    }

    .topmenuz ul li ul li a:hover
    {
    /*sub menus hover style*/
    background: #eff9ff;
    color: 000;
    }

    .downarrowclass
    {
    position: absolute;
    top: 8px;
    right: 2px;
    bottom: 2px;
    }

    .rightarrowclass
    {
    position: absolute;
    top: 6px;
    right: 2px;
    bottom: 2px;
    }

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

    Default

    Quote Originally Posted by webskipper View Post
    I use CSS layouts. 5 DIVs (top, footer, sides, and main).

    When I use JQuery Multi Level CSS Menu #2 inside the top DIV, the menu will not drop beyond the top DIV yet if I include it in the main container then I cannot get it to stick to the top DIV.
    l
    .jqueryslidemenu
    {
    overflow: visible;
    }

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

    Default

    How do I choose the width of the individual Top level UL's?

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

    Default

    Fixed it.

    I have 11 drop downs:

    Now I need some help to prevent the Arrow image from hovering over the UL Li's when the window is smaller.

    .jqueryslidemenua
    {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenub {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenuc {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenud {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenue {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenuf {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenug {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenuh {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenui {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenuj {
    width: 9.1%;
    white-space: nowrap;
    }
    .jqueryslidemenuk
    {
    width: 9.1%;
    white-space: nowrap;
    Last edited by webskipper; 04-01-2009 at 06:04 PM.

  7. #17
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi everyone,

    I have this implemented and it works well in everything EXCEPT ie6... it works in ie6 if there is no content underneath the drop downs, but if you have content the menus kind of freak out and you can't really click on any items easily.

    does anyone else have this issue? I tried messing around with stuff but it doesn't seem to fix it.

  8. #18
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok I asked too soon, I just fixed this problem by adding "zoom:1;" to .jqueryslidemenu ul li and that fixed it!

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

    Default

    IE6 gives me headaches. In IE6 the menu is broken, The UL Li has spaces.

    What is your URL that sows it works in IE6?

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

    Default

    .menu ul li a
    {

    background-image: url(/background.gif);
    background-color: #CCC;
    }

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
  •