SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mega drop down menu

    Hey guys,

    Bargain Clearance Warehouse

    If you hover over the "Gardening" link, you will notice a dropdown but it appears too far to the right. Any ideas why this is?

    Any suggestions as to how this can be fixed?



    Many thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I don't have much more time but was checking it out...
    Firefox & IE it's way over
    Chrome just a few hundred pixels over to the right

    Closely look at this line in nav.css

    ul#navigation-bar li {
    display: inline;
    position: relative;
    }

    When you disable relative it shifts all the way left.

    Looking further the element wrapping that I believe has this
    ul#navigation-bar div {
    background: none repeat scroll 0 0 #EEEEEE;
    color: #000000;
    font-weight: normal;
    left: -999em;
    margin-top: 35px;
    padding: 0 11px 10px;
    position: absolute;
    text-align: left;
    }

    It's as if this is pushing the relative item way out. Go ahead and uncheck that relative and see if you can reposition it easier with some margin-left attributes.

    Watch IE Box issues though!

    Hope that helps and if I have time I can help pinpoint further tomorrow!

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    adding float left to the li puts in on the money in fx

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Thanks for the advice, basically this dropdown need to be dynamic, so i would probably need to wrap the <ul> in a loop and pull out whatever i need to from the database.

    However, if you look at the drop downs now, if you hover over each main link, you will see that all appear too far to the left, and what problem i am having is the if i add a margin left it will add it to all the drop downs. I need to be specific for each one.

    Just so you understand what it should look like, an example is shown below:

    dropdown example

    Can you see where i am going wrong?

    Kind regards,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,

    Does anyone have any thoughts on how i can achieve this? Are there any examples i could possibly look at?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I am trying to have a go at doing this nav and have almost got it complete, see working example here.

    Ignore the roll overs as i need to make them look a lot better, was just doing it to test. Anyway, when you hover over the nav i have a series of <ul> elements which i float to the left so that they display inline but it doesn't seem to be working?

    Can anyone help?

    I need it to look like this.

    Many thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm assuming your going to have to override all the ul/li settings you have for the top level. like #nav ul {..}. That gets a little messing is why I just used "p" in mine.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK I looked. In mine I I used a width on the hide/show div and its contents inside (eg your ul). Doing so gets yours on track. I assume probably you need different widths for each. Maybe there is some magic way of dong it that someone else can show you but I would just class each div and feed it a width.

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric,

    The problem here is that the contents of the drop down will be dynamic populating from the database. So i might need to set a minimum width as the width could get bigger depending on the name of the headings in the dropdown..

    I will try and stick it all in a <div> and then see if i can achieve it that way

    Thanks again,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Your welcome let me know how you get along.

  12. #12
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,

    I have tried sticking the <ul> inside a <div> but can't seem to get it to display correctly

    Take a look here

    Can't seem to work out why this is happening?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, break the whole nav out of that page and set up a test page. I or someone else will take that code and make nice.

  14. #14
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again

    OK i have set up the navigation on a separate page here

    Any chance you could help me out please?

    I would very much appreciate it..
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool. To be clear. Do you still need the width of the drop to be dynamic? Because I don't know if that's possible.

    ...or just the list items?

  16. #16
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,

    Well when i pull it out from the database the <ul> will be in a while loop which i was hoping i could float to the left. I have tried doing this on the test page and you will see that i have got it to work how i want, see here

    So its just when it is withing the <div> within the dropdown that it does not seem to work.

    You will notice that i have not set a with on the <ul> and it still works, just the nav is causing issues
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. Well if I copy and past the code it does not work properly. If I extract the code form the css links and place in head it does not work at all. I'm not a good puzzle maker. So I am sort of unable to play with the code with out putting in some time. So I am back to making suggestions. I would not wrap each heading in a div. Just one div wraps them all. Just like mine. Use the ul as your container for each heading. The show/hide div needs to have a width that is wide enough to accommodate each section. For instance, if I give your div width 600px and each sub width 150px they all lay out horizontally as you want.

    If that does not work, why dont you take mine (which does) and reverse engineer it?

  18. #18
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is using your example, i changed it around a bit but most of it is your stuff

    I got it working nearly, see here

    i had to set a width on .navigation-bar-div and the <ul> as well as the heading the <li>.

    I have found 2 problems, it doesn't work in IE7, and second thing, the very last dropdown "Pets". If you hover over it, it adds a scroll bar to the page. Is there a way i can get the dropdown do appear to the left rather than the right as it is currently going off the page.

    Many thanks,

    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yes. To make it go left instead of right do exactly how I did it in my demo. Same as you, I'd have to go look to see how I did it.

  20. #20
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Yes. To make it go left instead of right do exactly how I did it in my demo. Same as you, I'd have to go look to see how I did it.
    Hmm, i seem to have all the same styles as per your demo i think..

    Can you see where i am going wrong?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  21. #21
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working. Forgot to apply the "dif" class to the list element.
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  22. #22
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh good - good job.


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
  •