Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74462

On page navigation with anchor tag on dropdown menu

$
0
0

I'm currently building a top navigation bar that shows dropdown on hover on some of the nav-items. It currently looks like this

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
    const $dropdown = $(".dropdown");
    const $dropdownToggle = $(".dropdown-toggle");
    const $dropdownMenu = $(".dropdown-menu");
    const showClass = "show";
    $(window).on("load resize", function() {
      if (this.matchMedia("(min-width: 768px)").matches) {
        $dropdown.hover(
          function() {
            const $this = $(this);
            $this.addClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "true");
            $this.find($dropdownMenu).addClass(showClass);
          },
          function() {
            const $this = $(this);
            $this.removeClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "false");
            $this.find($dropdownMenu).removeClass(showClass);
          }
        );
      } else {
        $dropdown.off("mouseenter mouseleave");
      }
    });
.navbar{
  background-color: black;
  padding-left: 5vw;
  padding-right: 4vw;
}

.navbar .nav-item{
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.navbar .nav-item .nav-link{
  color: white;
  font-size: 18px;
  font-family: 'Roboto';
  font-weight: bold;
}

.navbar .nav-item .nav-link:hover{
  color: red;
  text-decoration: none;
}

.navbar .nav-item a:hover{
  color: #4c4c4c;
}

.navbar .nav-item:not(:last-child) {
  margin-right: 5px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
   content: none;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.dropdown-menu {
  margin-top: 5px;
  border-top: 5px solid red;
  border-radius: 0;
  padding: 0;
}

.navbar .nav-item a{
  font-size: 18px;
  color: #080808;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 40px;
  font-weight: 400;
  font-family: 'Roboto';
  background-color: none;
  border-bottom: 1px solid rgba(193,193,193,0.59);
}

.navbar .nav-item .nav-link{
  border-bottom: none;
}
<nav class="navbar navbar-expand-lg"><div class="container-fluid"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto"><li class="nav-item dropdown"><a href="#information" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        About Us</a><div class="dropdown-menu" aria-labelledby="navbarDropdown1"><a class="dropdown-item" href="#">Who we are</a><a class="dropdown-item" href="#">What we do</a></div></li><li class="nav-item"><a class="nav-link" href="#">Events</a></li><li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li></ul></div></div></nav>

So what I want to do is having both dropdown on hover working as well as using the dropdown same button(nav-item) to work as a button that navigates the user to specified section.

In the above code, it would be "About Us" that will show its following dropdown on hover. And when "About Us" is clicked, it would navigate the user to specified section ("#information").

I can only get one or the other working. If i get dropdown on hover, navigation doesn't work, if i get navigation work, then dropdown doesn't appear on hover.

Any help would be much appreciated

Thank you.


Viewing all articles
Browse latest Browse all 74462

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>