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

Thread: ul drop menus add a sub?

  1. #1
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default ul drop menus add a sub?

    I was wondering if anyone knows if this is possible and if so where I can find out more information on how to accomplish it.

    I have vertical drop downs on a site but some categories will need sub categories.

    This is the code I have for example menu1
    HTML Code:
    <div id="menuoptions" class="menudropdiv">
                        <a href="#">Drop Option1</a>
                        <a href="#">Drop Option2</a>
                        <a href="#">Drop Option3</a>
                        <a href="#">Drop Option4</a>
                        </div>
    I wanted to add sub menus is there a way to go about that or do I need new code?

    -- Nate

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    What do you mean "sub menus"? Like a hover over, and it shows up?
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Sorry I mean a multilevel like

    *root menu
    Option1
    Option2
    - Sub Option1
    - Sub Option2
    -- Sub Option1b
    -- Sub Option1c

    Type of structure.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    And you wanna use divs, or lists?
    Will this work?:
    Code:
    <style>
    .sub {
    position: relative;
    left: 8.03px;
    }
    </style>
    <div>
    Home
    <div class="sub">
    A lot<br />More<br />How much?<br />A lot</div></div>
    Last edited by Nile; 03-18-2008 at 01:39 AM.
    Jeremy | jfein.net

  5. #5
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by nate51 View Post
    Sorry I mean a multilevel like

    *root menu
    Option1
    Option2
    - Sub Option1
    - Sub Option2
    -- Sub Option1b
    -- Sub Option1c

    Type of structure.
    Have you looked at these?

  6. #6
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Hey Medyman,

    Yes I have seen those, I have tried them all, the reason I want to stick with the code I am using is because it doesnt mess up the page I am using it on plus it's very easy for myself or any future developer who takes over the site to change and understand plus I am trying to hold onto a slide in affect I have on this one.

    If I have to go with another one and lose the effect I will but for now I want to see if I can just use what I am using and add to it.

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by nate51 View Post
    plus it's very easy for myself or any future developer who takes over the site to change
    that is incorrect, you are trying to brute force a list, so if an actual developer came along after, he/she would have to re-write your script to use an unordered list like you should be using.

  8. #8
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Oh....

    I didn't know it was an issue that bad.
    I will go about it a different method then.

    I'm a noobie with drop downs so I didn't know it would be a problem.

  9. #9
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Code:
    <ul id="menu">
         <li><a href="/link/path">TITLE</a></li>
         <li><a href="/link/path">TITLE</a></li>
         <li><a href="/link/path">TITLE</a><ul class="sub">
              <li><a href="/sub/link/path">SUB-TITLE</a></li>
              <li><a href="/sub/link/path">SUB-TITLE</a></li>
              <li><a href="/sub/link/path">SUB-TITLE</a><ul class="sub">
              </ul></li>
         </ul></li>
         <li><a href="/link/path">TITLE</a></li>
    </ul>
    then use the styles described at http://www.alistapart.com/articles/dropdowns/
    Last edited by boogyman; 03-18-2008 at 01:24 PM. Reason: added link for styles

  10. #10
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    boogyman,

    Thanks for the link and code.

    I was looking into this tutorial which they said has elements from the Suckfish drop downs
    http://qrayg.com/learn/code/cssmenus/

    The only issue I am having with it now is it does everything I am looking for but the main (*root) button that starts everything off is a jpg image rollover.
    This line in the CSS is messing things up for me.
    Code:
    /* Root = Vertical, Secondary = Vertical */
    ul#navmenu-v,
    ul#navmenu-v li,
    ul#navmenu-v ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 160px; /*For KHTML*/
      list-style: none;
    }
    With the width being 160px a gray box is appearing under the jpg button as the button is only 119px wide, but when I shorten the width or even eliminate it, the drop menus are also affected by this. ex located here

    Has anyone used this code with a jpg button as the root and found an effective way of doing this?

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
  •