HTML

How To Set Alignment Of Submenu With Respect To Parent Menu

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.

Share
Published by
Mitali Kukadiya

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago