Hover in html and css navigation

Asked

Viewed 280 times

2

Good people, here’s the thing, I’ve been after it for a while. I’ve been trying to box around the links in hover, this box will have a shadow and rounded corners, someone can help me?

Thanks in advance

.main-nav {
  background-color: #2c3136;
  width: 100%;
  height: 70px;
  text-align: center;
  box-shadow: 0 0 5 0 #000;
}

.main-nav li {
  display: inline;
  list-style: none;
}

.main-nav li a {
  text-decoration: none;
  color: white;
  margin-right: 50px;
  font-size: 90%;
  font-weight: bold;
}

.main-nav li a:link .main-nav li a:visited {
  padding: 8 0;
  color: #fff;
  background: transparent;
  transition: background 0.3s ease-in-out;
}

.main-nav li a:hover,
.main-nav li a:active {
  color: #fff;
  background: #5a5a5a;
  transition: background 0.3s ease-in-out;
}
<div class="row">
  <nav class="main-nav nav-js">
    <img class="logo" src="" alt="">
    <ul>
      <li><a href="#about_us">ABOUT US</a></li>
      <li><a href="#search">SEARCH</a></li>
      <li><a href="#top_artists">TOP ARTISTS</a></li>
      <li><a href="#contacts">CONTACTS</a></li>
    </ul>
  </nav>
</div>

Box example: https://w3layouts.com/preview/? l=/boombox-a-entertainment-Category-flat-bootstrap-Responsive-template/

The box I want is na li.

html css menu navigation-drawer hover

  • Nelson please edit your question by putting the code in writing, not image. From a Ctrl+c and a Ctrl+v here with your html / css code that will make it easy for us to respond. If possible put an image of the layout you want, an example of how you want Box and where it will be, in LI or Nav as a whole. Try to explain better

2 answers

1


Could use the pseudo element ::before and ::after combined and apply the background: radial-gradient(...) (the same was done on the site) in these elements.

It will also be necessary to put the position: relative; to align these elements above and below each menu, for example:

/*remove espaçamentos*/
.menu, .menu li {
    margin: 0;
    padding: 0;
}

.menu {
    background-color: #1d4888;
    min-width: 800px; /* pode fixar a largura com width ou colocar uma largura minima */
    white-space: nowrap; /* impede que os menus quebrem */
    text-align: center; /* impede que os menus quebrem */
}

.menu > li {
    background-color: #1d4888;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 150px;
}

.menu > li > a {
    padding: 15px 0;
    color: #fff;
    text-decoration: none;
    display: block;
}

.menu > li > a:hover {
    background-color: #333;
}

.menu > li > a::after,
.menu > li > a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu > li > a::after {
     top: 100%;
     background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu > li > a::before {
     top: -5px;
     background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
     background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu > li > a:hover::after,
.menu > li > a:hover::before {
    opacity: 1;
}
<ul class="menu">
    <li><a href="#about_us">ABOUT US</a></li>
    <li><a href="#search">SEARCH</a></li>
    <li><a href="#top_artists">TOP ARTISTS</a></li>
    <li><a href="#contacts">CONTACTS</a></li>
</ul>

-1

.main-nav {
  background-color: #2c3136;
  width: 100%;
  height: 70px;
  text-align: center;
  box-shadow: 0 0 5 0 #000;
}

.main-nav li {
  display: inline;
  list-style: none;
}

.main-nav li a {
  text-decoration: none;
  color: white;
  margin-right: 50px;
  font-size: 90%;
  font-weight: bold;
}

.main-nav li a:link .main-nav li a:visited {
  padding: 8 0;
  color: #fff;
  background: transparent;
  transition: background 0.3s ease-in-out;
}

.main-nav li :hover,
.main-nav li :active {
  color: #fff;
  background: #5a5a5a;
  transition: background 0.3s ease-in-out;
  border-radius: 4px;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="row">
  <nav class="main-nav nav-js">
    <img class="logo" src="" alt="">
    <ul>
      <li><a href="#about_us">ABOUT US</a></li>
      <li><a href="#search">SEARCH</a></li>
      <li><a href="#top_artists">TOP ARTISTS</a></li>
      <li><a href="#contacts">CONTACTS</a></li>
    </ul>
  </nav>
</div>

Browser other questions tagged html css menu navigation-drawer hover

You are not signed in. Login or sign up in order to post.