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
  • September 12, 2014 at 10:13 am #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>
    `

    September 12, 2014 at 11:34 am #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-----
----------------
    September 12, 2014 at 11:42 am #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.

    September 12, 2014 at 12:00 pm #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.

    September 12, 2014 at 12:08 pm #182783
    fmekuria
    Participant

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

    September 12, 2014 at 12:30 pm #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)

    September 12, 2014 at 12:33 pm #182786
    fmekuria
    Participant

    Okay, got it. Thanks.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.