SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using JavaScript to adjust the top of a flyout submenu

    Hello! Please take a look at my site:

    Test Flyout Lists

    As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient. Can I do this in JavaScript?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If you wanted a CSS only solution the you could add a class to that last item and then set the nested ul to be bottom:0 and top:auto.

    e.g.
    Code:
    <li class="has_children lastul"><a href="#">Item 15</a>
    Code:
    #navigation ul li.lastul ul {top:auto;bottom:0}
    Of course that assumes that the structure remains the same as you have shown.


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
  •