Stylish Interactive Menu Item

Question

Stylish Interactive Menu Item

Having a fixed navigation at the bottom of my website has presented me with an issue. The hover effect, specifically the background slide, triggers before I even place my mouse over the text. Currently, the background slides up when my mouse enters the .item-container. My goal is to have the hover effect occur ONLY when my mouse is directly over the text and not any outside divs.

If you'd like to take a look, here is my jsFiddle: https://jsfiddle.net/tebrown/dLz8fL80/

<nav>
    <ul>
        <li>
            <a href="#">
                <div class="item-container">
                    <div class="item-top">The Song</div>
                    <div class="item-bottom-song-content">The Song</div>
                    <div class="item-bottom-song">Have a Listen</div>
                </div>
            </a>
        </li>
        <li>
        ...
    </ul>
</nav>

I would greatly appreciate any assistance with this matter.

Thank you!

html css navigation

Answer 1

Answer №1

Make this adjustment in your CSS:

.item-container {
    top: 150px;
    position: relative;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.item-container:hover {
    height: 225px;
    line-height: 300px;
    top: -210px;
}

The issue was that the initial height of the container was set to 225px, causing the item content to pop out when hovering over the bottom text.

To fix this, adjust the height of your .item-container so it is 30px when not hovered, and 225px when hovered to display its content properly.

Check out a working example on JSFiddle

Answer 2

Make this adjustment in your CSS:

.item-container {
    top: 150px;
    position: relative;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.item-container:hover {
    height: 225px;
    line-height: 300px;
    top: -210px;
}

The issue was that the initial height of the container was set to 225px, causing the item content to pop out when hovering over the bottom text.

To fix this, adjust the height of your .item-container so it is 30px when not hovered, and 225px when hovered to display its content properly.

Check out a working example on JSFiddle

Answer 3

Answer №2

While there are a few nesting/structural level issues present, make sure to correct them. However, I was able to get your code working based on what you provided. Take a look and see if it helps.

$('.item-top').find('span').hover(function(e) {


  $(this).parents('.item-container').css("top", "-225px");

  e.stopPropagation();


});

$('.item-container').mouseleave(function() {

  $(this).css("top", "0px");


});

html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
...
</nav>

Answer 4

While there are a few nesting/structural level issues present, make sure to correct them. However, I was able to get your code working based on what you provided. Take a look and see if it helps.

$('.item-top').find('span').hover(function(e) {


  $(this).parents('.item-container').css("top", "-225px");

  e.stopPropagation();


});

$('.item-container').mouseleave(function() {

  $(this).css("top", "0px");


});

html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
...
</nav>

Answer 5

Answer №3

Many responses discuss positioning methods, but I'd like to introduce a unique approach using a different transition effect with a back-and-forth motion. Take a look at this fiddle example https://jsfiddle.net/dLz8fL80/3/

Explanation:

We have defined a transition for the .item-container:

.item-container {
    top: 0;
    position: relative;
    height: 225px;
    line-height: 300px;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

And another transition for .item-container:hover:

.item-container:hover {
    top: -225px;
    -webkit-transition: all 0.2s ease-in-out 200ms;
    -moz-transition: all 0.2s ease-in-out 200ms;
    -o-transition: all 0.2s ease-in-out 200ms;
    transition: all 0.2s ease-in-out 200ms;
}

When your mouse enters the .item-container, it triggers the :hover effect, and when your mouse exits, the reverse effect occurs.

I've added a delay to the :hover action so that there is a smoother transition in and out without causing sudden movements during passing-by.

Answer 6

Many responses discuss positioning methods, but I'd like to introduce a unique approach using a different transition effect with a back-and-forth motion. Take a look at this fiddle example https://jsfiddle.net/dLz8fL80/3/

Explanation:

We have defined a transition for the .item-container:

.item-container {
    top: 0;
    position: relative;
    height: 225px;
    line-height: 300px;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

And another transition for .item-container:hover:

.item-container:hover {
    top: -225px;
    -webkit-transition: all 0.2s ease-in-out 200ms;
    -moz-transition: all 0.2s ease-in-out 200ms;
    -o-transition: all 0.2s ease-in-out 200ms;
    transition: all 0.2s ease-in-out 200ms;
}

When your mouse enters the .item-container, it triggers the :hover effect, and when your mouse exits, the reverse effect occurs.

I've added a delay to the :hover action so that there is a smoother transition in and out without causing sudden movements during passing-by.

Answer 7

Answer №4

Make sure to properly nest UL and Li elements for easier styling. Avoid using div tags within list items. Example :

<ul>
    <li>
    <a href="#">The Song</a>
      <ul>
        <li class="item-bottom-song-content">The Song</li>
        <li class="item-bottom-song">Have a Listen</li>
      </ul>
    </li>

Answer 8

Make sure to properly nest UL and Li elements for easier styling. Avoid using div tags within list items. Example :

<ul>
    <li>
    <a href="#">The Song</a>
      <ul>
        <li class="item-bottom-song-content">The Song</li>
        <li class="item-bottom-song">Have a Listen</li>
      </ul>
    </li>

Answer 9

Answer №5

I'm not certain if this solution will be effective, but I have a suggestion:

nav ul li {
    width: 20%;
    float: left;
    text-align: center;
    line-height: 200px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}

DEMO

Answer 10

I'm not certain if this solution will be effective, but I have a suggestion:

nav ul li {
    width: 20%;
    float: left;
    text-align: center;
    line-height: 200px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}

DEMO

Answer 11

Answer №6

To activate the hover effect, target the .item-top element instead of the .item-container. Alternatively, you could enclose the text in a <p> tag and apply the hover effect to p:hover.

Answer 12

To activate the hover effect, target the .item-top element instead of the .item-container. Alternatively, you could enclose the text in a <p> tag and apply the hover effect to p:hover.

Stylish Interactive Menu Item

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

Is it possible that the div's height is not being set to 0 pixels

"Position the label on the left and input on the right for

Clicking within the text activates the dropdown menu, but clicking outside the text does not

Unable to load the Universe 55 font using the @font-face rule

Step-by-step guide to creating a border around text with a number included in between the lines

How to Choose a Radio Button from a Group using Selenium WebDriver and Java

The header text appears misaligned and is not centered as intended

Suggestions for preventing the highlighting of the space between buttons on a webpage

Is the Owl carousel Auto Play feature malfunctioning when hovered over?

Python Application Engine - Streamlining Responses from HTML Control Arrays

Retrieving a unique custom data-attribute using select2 on a <select> element

What is the best way to place two radio buttons side by side in a row?

Unusual occurrence involving label span and the use of italic font styling

Arrange pictures and div elements in a horizontal layout

Exploring the world of CSS and designing layouts using multiple div elements

Use Bootstrap to effortlessly arrange columns horizontally in a row

Using PHP to access HTML content from a page that demands authentication

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

Eliminate custom CSS generated by themes on WordPress category pages