What is the best way to design a div that only appears on hover and fits seamlessly between two other layouts?

Have you ever tried cloning a navbar? Take a look at this example: navbar

If you hover over a section like "BOOK," you'll notice an orange rectangle that appears above the navbar. This div (orange) is positioned between the black background of the navbar and the text.

I believe this effect is achieved using a div, but I've had trouble recreating it myself. Whenever I add a Sibling Element after the .list-item div and then hover over it, the text 'BOOK' becomes obscured because that div is positioned higher in the layout compared to the .list-item div.

body {
    margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}

header {
text-align: center;
padding-bottom: 3rem;
}

nav {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
color: white;
background: black;
}

ul {
    margin: 0;
    padding: 0;
display: flex;
width: 85%;
font-weight: 600;
}

li {
    list-style-type: none;
cursor: pointer;
padding: 0 1.6rem;
line-height: 3;
}

li:hover {
background-color: tomato;
transition: 220ms ease;
}

.list-item span {
padding-right: 0.4rem; 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h3>
            E-SHOP
        </h3>
    </header>
    <nav>
        <ul>
            <li>
                <div class="list-item">
                    <span>HOME</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>BOOK</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>AUDIO BOOKS</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>CHILDREN'S BOOKS</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>BLOG</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>PAGES</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>
            <li>
                <div class="list-item">
                    <span>SALES OFF</span>
                    <i class="fas fa-angle-down"></i>
                </div>
            </li>                             
        </ul>
    </nav>
</body>
</html>

javascriptjqueryhtmlcss

Answer №1

To achieve this particular effect, you can utilize pseudo elements. By adding a zero-sized element with colored and transparent borders, you can create a triangle:

/* Ensure the pseudo elements are positioned correctly */
li {
  /* ... */
  position: relative;
}

/* Add a rectangular bar above the navigation element on hover */
li:hover::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  top: -20px;
  left: 0;
  background: tomato;
}

/* Generate a small triangular flag on the top right when hovered */
li:hover::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  border: 10px solid green;
  border-right-color: transparent;
  border-top-color: transparent;
}

In your specific scenario:

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
}

header {
  text-align: center;
  padding-bottom: 3rem;
}

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  color: white;
  background: black;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 85%;
  font-weight: 600;
  margin-top: -20px;
}

li {
  list-style-type: none;
  cursor: pointer;
  padding: 20px 1.6rem 0 1.6rem;
  line-height: 3;
  position: relative;
  transition: 220ms ease;
}

li:hover {
  background-color: tomato;
}

li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  border: 10px solid green;
  border-right-color: transparent;
  border-top-color: transparent;
  opacity: 0;
  transition: opacity 220ms ease;
}

li:hover::after,
li:hover::before {
  opacity: 1;
}

.list-item span {
  padding-right: 0.4rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <header>
    <h3>
      E-SHOP
    </h3>
  </header>
  <nav>
    <ul>
      <li>
        <div class="list-item">
          <span>HOME</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>BOOK</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>AUDIO BOOKS</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>CHILDREN'S BOOKS</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>BLOG</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>PAGES</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
      <li>
        <div class="list-item">
          <span>SALES OFF</span>
          <i class="fas fa-angle-down"></i>
        </div>
      </li>
    </ul>
  </nav>
</body>

</html>

Answer №2

One way to achieve this is by creating the "orange rectangle" as a sibling element and positioning it using the CSS property position: absolute. Another option is to add the "orange rectangle" as a pseudo-element ::before to the li element and make it visible on hover. Personally, I prefer the latter method:

.li:before{
 background: #f07c29;
 bottom: 0;
 content: "";
 left: 0;
 opacity: 0;
 position: absolute;
 right: 0;
 top: -8px;
}

.li:hover:before {
 opacity: 1;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What can I do to prevent my background images from overlapping each other?

I'm trying to get the background images to display side by side with equal sizes and no spacing between them. The current code achieves this, but the images end up overlapping slightly, not filling 100% of the container. Despite setting the backgroun ...

htmlcssbackground

Tidying Up jQuery Code

Is there a more efficient method to achieve the same goal here? I want to set the focus on the first empty field, either the email input or password input. $(document).ready(function() { $('#email_address').val() == '' ? $('#e ...

jquery

error message - The Rails application could not find the VueJS file and returned a 404 error

For the last 6 months, we have been dealing with an issue loading our app page in local development. We keep encountering blank pages with net::ERR_ABORTED 404 (Not Found) errors in the console logs. After a few refreshes, the page eventually loads. This s ...

javascriptrubynpmwebpackwebpack-dev-server

Mobile issue: unable to scroll to the top of the page

Despite my efforts in searching and attempting various solutions from SO, I have still been unsuccessful. I have explored options like the iscroll library and setting timeouts, but to no avail. My objective is to enable scrolling to the top of the window/ ...

javascriptjqueryios

The proper method for updating data on a backend API using Axios and Vue

I am working on a Vue application that includes several form fields. I want to ensure that any changes made by the user are saved in real-time to a backend database using a REST API with Axios, without requiring the user to click a save button. I have two ...

javascriptvue.jsaxios

Uploading multiple files simultaneously in React

I am facing an issue with my React app where I am trying to upload multiple images using the provided code. The problem arises when console.log(e) displays a Progress Event object with all its values, but my state remains at default values of null, 0, and ...

javascriptreactjstypescript

Creating variables dynamically and incorporating them into anchor tags: A comprehensive guide

In my HTML page, I have a feature where users can add multiple buttons with anchors that require passing variables. Currently, I am manually adding the variables like this: Code Snippet: <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmljquery

JavaScript Express is serving up a blank JSON response

Hello there, I have a specific function that is supposed to generate an Object which I want to send back to the browser. However, for some unknown reason, the browser is receiving an empty Object without any content inside: { pName: [ ] } Below you ...

javascriptjsonnode.jsexpress

Issue with AJAX Tabs in jQuery UI Dialog

Having trouble integrating jQuery Tools Tabs (AJAX) and jQuery UI Dialog (manually loading AJAX for dialog). The problem arises when the dialog is loaded and set up specifically for the current tab, which gets loaded via AJAX along with the tab's cont ...

jqueryajaxjquery-uijquery-dialogjquery-tools

Looking to automate the selection of a dropdown menu using Selenium with JavaScript

Below is the code snippet for a drop-down: <div class="w-1/2 px-8 pt-6"> <div class="Styled__FieldWrapper-sc-1fqfnqk-1 bQZNMa mb-6"> <label class="form-label" for="transfer.account">Transfer Acc ...

javascriptseleniumselenium-webdriver

Tips for placing order import styles css module as the first line in eslint-plugin-import configuration

I'm currently setting up ESLint for my project, using `eslint-plugin-import` to organize module import order. However, I have a specific case with a style CSS module that I want to place at the beginning of the import list. How can I configure ESLint ...

javascriptreactjseslint

Having difficulty retrieving the selected element with Select2 jQuery

Currently developing an HTML5 template known as Londinium - responsive bootstrap 3 admin template In my dropdown menu, I have three items. When the user clicks on Owned, I am trying to display the hidden div cown, but it is not showing up. The drop-down ...

jquerycsstwitter-bootstrap

Showcase information from APIs using Vue.js

I am facing an issue where I am able to fetch data correctly from the API, but I am unable to display it. When I manually input items, they are displayed, but the items fetched from the API remain invisible. I even attempted to move the API call directly i ...

javascriptvue.jsvuejs3

Tips for populating two drop-down menus within a row that is created dynamically

Issue: I'm unable to populate drop down lists in dynamically generated new rows. $('#Title_ID option').clone().appendTo('#NewTitle_ID'); $('#Stuff_ID option').clone().appendTo('#NewStuff_ID'); These lines handl ...

javascriptjqueryasp.net-mvcentity-framework

Struggling to get the Ant design button to launch an external link in a new tab using React and NextJS

I have an Ant button set up like this: <Button style={{ borderRadius: '0.5rem' }} type="default" target="_blank" ...

javascriptreactjshttp-redirectroutesnext.js

Iterate over rows in a b-table component in Vue

In the context of Vue bootstrap, a b-table consists of a list with an unknown number of rows. The requirement is to display a remove button only if the email in the row matches that of the currently logged-in user. This functionality currently works for a ...

javascriptvue.jsloopsbootstrap-vue

Top methods for integrating custom divs into your WordPress site using PHP

As someone who is new to wordpress, I have a solid understanding of php, html, css and javascript. I am interested in integrating a custom font resizer into my wordpress site similar to the example shown below: https://i.stack.imgur.com/FwoIJ.jpg What w ...

phphtmlcsswordpress

How to make a JQuery list item unselectable when appending it

I encountered a strange issue while using jQuery to append items to a list. <ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all"> <li id="NicheItem_1"> Item 1</li> <li id="NicheItem_2"> Item 2</li& ...

javascriptjquerylistappend

Developing a Customized Modal with Backbone.js

As a newcomer to Backbone, I have been trying to create a Modal in my application by setting up a base Modal class and then extending it for different templates. However, despite conducting some research, I haven't been able to find a solution that fi ...

javascriptjquerynode.jsbackbone.jsexpress

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

javascripthtml