How To Set Alignment Of Submenu With Respect To Parent Menu

Jan 22, 2022 0 286

Mitali Kukadiya

I am a Junior WordPress Developer at Vision Infotech. I have good skills in WordPress, ...

In this article, we will learn about how to set the alignment of the submenu with respect to the parent menu.

First of all, create a navigation menu.

Add the below code in your HTML file to create a navigation menu.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #212121; 
}
.mainnav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}
.mainnav .mainnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  list-style: none;
}
.mainnavbtn:hover {
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
}
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  top: 58px;
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
  z-index: 1;
}
.subnav-content a {
  float: left;
  color: #FFFFFF;
  text-decoration: none;
}
.subnav-content a:hover {
  background-color: #eeeeee;
  color: #212121;
}
.mainnavbtn:hover .subnav-content {
  display: block;
}
</style>
</head>
<body>
  <div class="navbar">
    <ul class="mainnav">
    <li class="mainnavbtn"><a href="#">Home <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">About <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#">Gallery <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">Blog <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</body>
</html>

Now, add jQuery to set a starting alignment of the submenu.

jQuery(document).ready(function(){
  jQuery( ".mainnavbtn" ).mouseover(function() {
    var widthAdd = 0;
    var prevwidth = 0;
    var navbarWidth = jQuery('.navbar').width();
    var lengthPreDiv = jQuery(this).prevAll().length;
    for(i=1; i<=lengthPreDiv; i++) {
    prevwidth += widthAdd+parseInt(jQuery(this).parent('ul').children('li:nth-child(' + i + ')').outerWidth(true ));
    }
    var mainwidth = navbarWidth - prevwidth;
    jQuery('.subnav-content').width(mainwidth);
    jQuery('.subnav-content').css({ 'margin-left': prevwidth + 'px' }); 
  });
});

Here, is below full code described.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #212121; 
}
.mainnav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}
.mainnav .mainnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  list-style: none;
}
.mainnavbtn:hover {
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
}
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  top: 58px;
  background: linear-gradient(221.04deg, #F26522 2.41%, #AB47BC 95.16%);
  z-index: 1;
}
.subnav-content a {
  float: left;
  color: #FFFFFF;
  text-decoration: none;
}
.subnav-content a:hover {
  background-color: #eeeeee;
  color: #212121;
}
.mainnavbtn:hover .subnav-content {
  display: block;
}
</style>
</head>
<body>
  <div class="navbar">
    <ul class="mainnav">
    <li class="mainnavbtn"><a href="#">Home <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">About <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#">Gallery <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      </div>
    </li>
    <li class="mainnavbtn"><a href="#">Blog <i class="fa fa-caret-down"></i></a>
      <div class="subnav-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </li>
     <li class="mainnavbtn"><a href="#contact">Contact</a></li>
    </ul>
  </div>
<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery( ".mainnavbtn" ).mouseover(function() {
      var widthAdd = 0;
      var prevwidth = 0;
      var navbarWidth = jQuery('.navbar').width();
      var lengthPreDiv = jQuery(this).prevAll().length;
      for(i=1; i<=lengthPreDiv; i++) {
      prevwidth += widthAdd+parseInt(jQuery(this).parent('ul').children('li:nth-child(' + i + ')').outerWidth(true ));
      }
      var mainwidth = navbarWidth - prevwidth;
      jQuery('.subnav-content').width(mainwidth);
      jQuery('.subnav-content').css({ 'margin-left': prevwidth + 'px' }); 
    });
  });  
</script>
</body>
</html>

Output:

Thank You, I hope you find something useful here.

Mitali Kukadiya

I am a Junior WordPress Developer at Vision Infotech. I have good skills in WordPress, PHP, HTML, CSS, and jQuery.
Read More

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories