Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Rollover Navigation Menu

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #182769
    fmekuria
    Participant

    Hello, I have been struggling on trying to implement a mouse rollover navigation. What I am trying to do is my side navigation will be number so on mouse roll the number will expand and user will be able to click on that. Here is what I am using in the HTML5 but lost in the css.

    `
    <body>
    <ul class=”menu-list”>
    <li>
    <div id=”” class=”rollout-menu”>
    <span>1</span>
    <div class=”rollout-menu-title”>Title 1</div>
    </div>
    </li>
    <li>
    <div id=”” class=”rollout-menu”>
    <span>1</span>
    <div class=”rollout-menu-title”>Title 1</div>
    </div>
    </li>

    </ul>
    </body>
    </html>
    `

    #182777
    Soren
    Participant

    How do you want it to behave?

    Hover over the number (e.g, “2”) and then “title 2” appears underneath, nudging “3” down?

    ---1------1--------
    ---2------2--------
    ---3-----title-----
    ----------3--------

    or maybe with some space between each number, the title fills the space and no number is nudged down?

    ---1------1-----
    ----------------
    ---2------2-----
    ---------title--
    ---3------3-----
    ----------------
    #182778
    fmekuria
    Participant

    How I want to appear is that, when I hove over the number it should scroll out the title for the associated number. The rest stay the same.

    #182780
    Soren
    Participant

    There are lots of ways. Here’s one very basic way CSS only: codepen demo

    It all depends if you want the title to appear horizontal or vertical to the number.

    #182783
    fmekuria
    Participant

    Thank you! If I want to display that in a side navigation bar, do I just put it in a column?

    #182784
    Soren
    Participant

    Uh huh, you can place this anywhere you want. You could wrap the <ul> inside another element ready for styling if your design asks for it.

    Bare in mind I’ve just shown you an example based on how I interpreted your first post .

    (I’ve updated my codepen)

    #182786
    fmekuria
    Participant

    Okay, got it. Thanks.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.