SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spry Menu Bar submenus don't stay open to click in IE7

    I'm using the Adobe Spry Menu Bar 2.0 widget in Dreamweaver CS 5.5. It works and looks great in Firefox, Safari, and IE 9. However in IE 7 you have to rollover just the right part of the drop down menu (such as the word itself) for the submenu to appear, then it won't stay open long enough to get over to it and chose an item to click on (not unless you are very fast and very lucky).

    A lot of our dealers use older versions of browsers and unless I can get this figured out, I'll have to redo the entire nav using something else.
    Can anyone help?

    Here is a link to the site (in progress). The only pages I have done are:
    Vertical Lifts (under Products, then Lifts)
    Dock (under Products, then Dock Systems)
    Manuals (under Owners)

    http://www.lakeshoreproducts.com/barbara/index.html

    OR... If there is a better menu to use that will work across all browsers and that I can configure to look like (or look similar) to the one I have, please let me know. This is only my second dreamweaver site and I no nothing about jquery, javascript, ajax or any of that, which is why I was trying to use a widget which was already made. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi monta17. Welcome to the forums.

    Unfortunately, such tools create a lot of horrid code to achieve their effects (although at least the menu is navigable via the keyboard, which is a plus).

    Here is a nice example of how cleanly this can be done with CSS alone:

    http://www.pmob.co.uk/temp/drop-down-basic-good.htm

    It wouldn't be hard to replace your current code with this, and you can then break free from Dreamweaver! Win win.

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice.
    I might give this a try.
    This the code as I see it in Firefox (is this a good starting point to use and to try to modify it from there? or should I start with something else?)"

    body {
    font: normal 11px verdana;
    }
    ul#nav, ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ul#nav li {
    position: relative;
    float: left;
    width:149px;
    }
    #nav li ul {
    position: absolute;
    left: 0;
    top: auto;
    margin-left:-999em;
    }
    #nav li li{width:149px;}
    #nav li ul ul{
    position: absolute;
    left:100%;
    top: -.1em;
    margin-left:-999em;
    }

    /* Styles for Menu Items */
    ul#nav li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fffccc; /* IE6 likes a background here */
    padding: 5px;
    border: 1px solid #ccc;
    zoom:1.0;
    }

    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    color: #fff;
    background-color: red;
    }
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    color: #777;
    background: #fffccc;
    }
    #nav li ul li a {
    padding: 4px 5px;
    } /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    margin-left:-999em;
    }
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    margin-left:0;
    }


  4. #4
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.
    I've tried to use the css example you gave me and have come up with this so far:

    http://www.lakeshoreproducts.com/barbara/nav2.html

    What I CAN'T figure out is how to change the width of the second level of submenus (not sure what you call these). For example the submenu that come out when you click on "Lifts" and "Dock Systems" (under "PRODUCTS"). Right now they are the same width as the top nav items, which when they appear end up looking like they are under the "OWNERS" section.
    Now sure if I'm explaining this right.
    Please let me know how to change this if you will.
    Here is the css I have:



    #nav {
    /* [disabled]background-color: #FC9; */
    /* [disabled]height: 300px; */
    width: 960px;
    }


    ul#nav, ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ul#nav li {
    position: relative;
    float: left;
    width:240px;
    background-color: #79cdd1;
    }
    #nav li ul {
    position: absolute;
    left: 0;
    top: auto;
    margin-left:-999em;
    }
    #nav li li{
    width:240px;
    }
    #nav li ul ul{
    position: absolute;
    left:100%;
    top: -.1em;
    margin-left:-999em;
    }

    /* Styles for Menu Items */
    ul#nav li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    /* [disabled]background: #79cdd1; */
    zoom:1.0;
    border-right-width: 1px;
    border-right-style: solid;
    /* [disabled]border-right-color: #F00; */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 20px;
    padding-top: 70px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-align: right;
    letter-spacing: 0.5pt;
    /* [disabled]border-bottom-width: 1px; */
    /* [disabled]border-bottom-style: solid; */
    width: auto;
    }

    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
    /* [disabled]color: #666; */
    background-color: #7bafde;
    /* [disabled]width: 180px; */
    }
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
    color: #333;
    background-color: #FFFFFF;
    text-align: left;
    font-size: 12px;
    border: thin solid #cccccc;
    letter-spacing: normal;
    height: 15px;
    }
    #nav li ul li a {
    padding: 4px 5px;
    } /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
    margin-left:-999em;
    }
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
    margin-left:0;
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    What you have now looks great to me, so well done. But if you want to target specific levels of the menu, you can do something like this:

    For the first drop down level:

    Code:
    #nav li li  {width: 300px;}
    and for the next level:

    Code:
    #nav li li li  {width: 100px;}
    etc. At the moment, in Firefox, each level is the same width, and it looks good that way to me. Are you seeing something different in another browser?

  6. #6
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    You have been so much help.
    This is where I'm at now...
    http://www.lakeshoreproducts.com/barbara/nav2.html

    One last thing. Is there anyway to insert the little black arrows (gifs) that were in the original example (instead of the two small arrow things) indicating the drop down menus? (original example for reference: http://www.lakeshoreproducts.com/barbara/index.html

    If not, it will be fine as it is.
    Thanks again.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by monta17 View Post
    Is there anyway to insert the little black arrows (gifs) that were in the original example
    Yes, no problem at all. Just do what's done on the Spry version, adding the arrow as a background image. for example, on the top level links, do something ike this:

    Code:
    #nav li a {background: url("Spry-UI-1.7/css/Menu/basic/images/ArrowMenuDown.gif") no-repeat right 85px;}
    Of course, you should move the background image to a more obvious location, like your images folder, so you'll need to change that file path.

    For the other links, remove the from the HTML and also put in a background image on selected links, perhaps via a special class. E.g.:

    Code:
    <a class="sub" href="#">Lifts </a>
    Code:
    #nav li li a.sub {background: url("Spry-UI-1.7/css/Menu/basic/images/ArrowMenuRight.gif") no-repeat right 50%;}
    Also, you'll probably need to add a bit of padding for any links with an arrow to make room for the arrow, which is added in the padding area as a background image.

  8. #8
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I didn't quite put in exactly what you said (because I couldn't figure it out), but I think I got the drift and did manage to modify a few settings and create a class, it works as far as I can tell.
    Let me know if you see anything wrong.
    And thanks a bunch for all your help!!!
    I think I'm finally "there".
    http://www.lakeshoreproducts.com/barbara/index.html

    cheers!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by monta17 View Post
    I didn't quite put in exactly what you said (because I couldn't figure it out), but I think I got the drift and did manage to modify a few settings and create a class
    For someone who didn't understand, you made a jolly good fist of it! Well done, looks perfect to me. And now you've got a much cleaner and easy-to-manage menu than before. Well done.

  10. #10
    SitePoint Member
    Join Date
    May 2012
    Location
    Michigan
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to: Ralph.m
    Since you've been such a help with this I would like to ask about an accordion spry menu I have on another website, but I'm thinking I should start a new thread for that issue. Is that right?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by monta17 View Post
    I would like to ask about an accordion spry menu I have on another website, but I'm thinking I should start a new thread for that issue.
    Either is fine, really, but you might get more responses in a new thread, so perhaps that's best.

    (Perhaps make a note here when you do, though, as anyone who's reading this later will know where to go next. )


Tags for this Thread

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
  •