Css "menu" items

  • romtim

    (@romtim)


    13 years, 1 month ago

    Hello, I was wondering if anyone knows if it is possible to make this work.
    Lets say we have 4 menu items. On passive state, they are each 25% wide. Well actually, there is no place I can say that each of them is 25% wide, as far as I know, is there?
    And when I hover over one of them, it becomes 40% wide, and the 3 remaining get 20% wide (5% less).
    Is there a way to make this work in CSS?
    So passive element width in % = (100-40ifelementhovered)/#ofpassiveelements ).

    Right now, I can make so that hovered elements get increased padding so that they appear wider, but that makes the whole menu wider, since the other elements do not compensate for the increase in width of a single hovered element.

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    I think you can make this work in jQuery and CSS, something like;

    <style>
.width40 { width: 40%; }
.width20 { width: 20%; }
</style>
    jQuery('li').hover(function($) {
 $(this).toggleClass('width40');
 $(this).siblings().toggleClass('width20');
});

    Thread Starter romtim

    (@romtim)

    13 years, 1 month ago

    And when nothing is hovered, it wont be at 25% as far as I see.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Css "menu" items’ is closed to new replies.