SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Menu Trouble

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Trouble

    I am attempting to build a dropline menu for my site. I've gotten it to the point that I have the submenu items in horizontal layout that appears on hover. I am building and checking, in Safari on a Mac. I was suprised to find that when I opened the page in Safari on an iOS devise that the submenu did not align as intended below the parent menu. I checked on the Mac using Firefox and the same problem persists. I used the css {left:-167px;} to place it in Safari. I assume that is the problem.

    Questions:

    1) How do I get the submenu to appear aligned exactly beneath the parent menu in all browsers?
    2) I want the submenu to scroll down. I hear this can be done with CSS3 but not for all browsers. How would I do it then so that everyone can see the same thing? Care to share the code?

    The site can be found temporarily at blog dot gardensare.com Hover over the Services menu item.

    Thanks for your help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try this:

    Remove position: relative from here:

    Code:
    ul.navigation {
      float: left;
      list-style: none outside none;
      margin: 0;
      padding: 0;
      position: relative;
    }
    and here

    Code:
    ul.navigation li {
      list-style: none outside none;
      margin: 0;
      position: relative;
    }
    and remove the left: -167px setting from here:

    Code:
    body.custom #navigation ul li ul {
      -moz-box-shadow: 4px 1px 5px #626037;
      background-color: rgba(130, 128, 55, 0.9);
      height: 46px;
      left: -167px;
      padding-left: 19px;
      width: 881px;
    }
    That will position the dropline in relation to the navigation div, which is where you really want it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. Very close! It appears I did not have to remove the first position:relative (at least as far as I can tell).

    It does look like I have to change something with the 19px padding in the main menu as the submenu seems to inherit that and is still not quite lined up. Trouble is that the main menu is in the correct place (Home is centered under the flower and inline with the content in the footer). Any suggestions?

    After that the next step will be to make the submenu transition down smoothly/scroll.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Don1 View Post
    Thank you. Very close! It appears I did not have to remove the first position:relative (at least as far as I can tell).
    Suck it ans see (as my grand dad used to say!)

    If you remove pos: rel here it will align nicely:

    Code:
    ul.navigation {
      float: left;
      list-style: none outside none;
      margin: 0;
      padding: 0;
      position: relative;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! The ul.navigation not the div. Now I see. Thank you, thank you. How does it look on your end (hopefully not in Safari)?

    Now to open another thread…

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Looks fine in all my browsers.

    We didn't get onto question 2, so no need to post a new thread if that's what you meant. What do you mean b 'scroll down'?

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent on both accounts.

    I'd like it to have a similar transitioning as shown in following example, but in horizontal motion of course—like a window shade: Tryit Editor v1.4

    As I have set this up I can see that I do not have it so that I can easily use this CSS3 exactly. My understanding is that there needs to be a starting size and ending size. I do not have a starting size and if I do the submenu always appears. I suppose I could hide it off screen but this seems to be getting complicated.

    I have seen this done with cross-browser compatibility using jQuery. I do not know if this is better or worse and I do not know the first thing about jQuery or JavaScript.

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Behold, someone just pointed me toward an extravagant example of what I am trying to do at UberMenu – WordPress Mega Menu Plugin I don't need or want anything so extensive but the transitioning of the submenu as it appears or "scrolling" is along the lines of what I want to do.


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
  •