Jquery Slide Menu Appearing Below Main Menu

December 27, 2023 Post a Comment

With the code below I have created a fixed

consisting of an and a . Now I want to add sub-menus to the as you can

Solution 1:

Use position:absolute on SlideItem relative to immediate parent, and avoid to use css on elements directly e.g. you have used ul { height: 100%;display:flex; ... } it will apply css to all ul elements, better way is to use class or inheritance.

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation > ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation > ul > li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}
.button{
  position:relative;
}
.SlideItem {
  display: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
  margin:0;
}
.SlideItemli{
  display:block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="header"><divclass="image">
    Image
  </div><navclass="navigation"><ul><liclass="button"> 1.0 Main Menu
        <ulclass="SlideItem"><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li></ul></li><li> 2.0 Main Menu </li><li> 3.0 Main Menu </li></ul></nav></div>

Solution 2:

First, you need to set the display of your drop down element to block. This way the blocks will drop vertically below the parent menu item (and not next to it). Then remove the height: 100% it causes some issues with your drop down elements. Also, set the position to absolute, allowing you to decide it's vertical/horizontal position: here we have set it to 41px.

Finally, I added a line of JS to ensure that the menu is hidden on page load.

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

$(".button").children(".SlideItem").slideUp(0);

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 43px;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position: absolute;
  top: 41px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="header"><divclass="image">
    Image
  </div><navclass="navigation"><ul><liclass="button"> 1.0 Main Menu
        <ulclass="SlideItem"><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li></ul></li><li> 2.0 Main Menu </li><li> 3.0 Main Menu </li></ul></nav>

Solution 3:

Using absolute positioning on the submenu, with position:relative on the parent will keep the submenu positioned relative to the parent.

From there it's just a bit of extra twiddling; here I flipped the flex-direction of the submenu to vertical, and gave it a specific height. (Depending on the actual contents of these menus, this may or may not be necessary.) The submenu is centered on the parent menu item because of the justify-content etc that's been globally applied to li items; if you want different styling for parent and child menus you may want to base those rules on classnames instead.

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

.button {
  position: relative;
}

.SlideItem {
  position: absolute;
  flex-direction: column; /* we already have display:flex below */height: 150px; /* height of full submenu */
}

.SlideItemli {
  flex-grow: 1/* make all elements the same height */
}

/* Below is as in original code */.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: none;
}

.SlideItem {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="header"><divclass="image">
    Image
  </div><navclass="navigation"><ul><liclass="button"> 1.0 Main Menu
        <ulclass="SlideItem"><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li><li> 1.1 Sub Menu </li></ul></li><li> 2.0 Main Menu </li><li> 3.0 Main Menu </li></ul></nav></div>

Solution 4:

Use position: absolute

.SlideItem {
    display: none;
    position: absolute;
    top: 20px;
}

You need to play around with your code as the mouse will loose focus on the main menu, causing the sub to slide up when hovering over it .

Build Html5

Jquery Slide Menu Appearing Below Main Menu

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Jquery Slide Menu Appearing Below Main Menu"