CODEWITHSUNDEEP
javascripthtmlcss
sfarzoso
sfarzoso

Reputation: 1600

Cannot create a vertical menu

I'm trying to create a vertical menu but the final result looks like this:

enter image description here

this is my code:

$("#example-one").append("<li id='magic-line'></li>");

/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
  .width($(".current_page_item").width())
  .css("left", $(".current_page_item a").position().left)
  .data("origLeft", $magicLine.position().left)
  .data("origWidth", $magicLine.width());

$("#example-one li")
  .find("a")
  .hover(
    function() {
      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.parent().width();

      $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
      });
    },
    function() {
      $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
      });
    }
  );
.nav-wrap {
  margin: 50px auto;
  background-color: rgba(0, 0, 0, 0.6);
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

/* Clearfix */
.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

*:first-child+html .group {
  zoom: 1;
}

/* IE7 */

/* Example One */
#example-one {
  margin: 0 auto;
  list-style: none;
  position: relative;
  width: 200px;
}

#example-one li {
  display: inline-block;
}

#example-one a {
  color: #bbb;
  font-size: 14px;
  float: left;
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#example-one a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

.current_page_item a {
  color: white !important;
}

.ie6 #example-one li,
.ie7 #example-one li {
  display: inline;
}

.ie6 #magic-line {
  bottom: -3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul class="group" id="example-one">
    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
    <li class="" data-target="about"><a href="index.php#about">About</a></li>
    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
    <li class="" data-target="news"><a href="index.php#news">News</a></li>
    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
  </ul>
</div>

Essentially I would like to have all the items as a vertical menu like this: https://www.w3schools.com/howto/howto_css_vertical_menu.asp

I tried to add a specific width but I get the same result

How can I achieve that?

Upvotes: 0

Views: 45

Answers (2)

Umair Umer
Umair Umer

Reputation: 26

Please replace your CSS code with these lines. 

 .nav-wrap {
      margin: 50px auto;
      background-color: rgba(0, 0, 0, 0.6);
      border-top: 2px solid white;
      border-bottom: 2px solid white;
    }
    
    /* Clearfix */
    .group:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0;
    }
    
    *:first-child+html .group {
      zoom: 1;
    }
    
    /* IE7 */
    
    /* Example One */
    #example-one {
        list-style: none;
        position: relative;
        display: grid;
        max-width: 200px;
        background: #F1F1F1;
        padding: 0px;
    }
    
    #example-one li {
      display: inline-block;
    }
    
    #example-one a {
        color: #000;
        font-family: sans-serif;
        font-size: 14px;
        width: 100%;
        float: left;
        padding: 11px;
        text-decoration: none;
        text-transform: capitalize;
    }
    
    #example-one a:hover {
        color: #818181;
    }
    
    #magic-line {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100px;
      height: 2px;
      background: #fe4902;
    }
    .current_page_item {
        background: #4CAF50;
    }
    .current_page_item a { 
    	color:white;
    }
<div class="menu">
  <ul class="group" id="example-one">
    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
    <li class="" data-target="about"><a href="index.php#about">About</a></li>
    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
    <li class="" data-target="news"><a href="index.php#news">News</a></li>
    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
  </ul>
</div>

Upvotes: 1

Aaron3219
Aaron3219

Reputation: 2225

You are using float and display: inline-block. Just remove those properties.

.nav-wrap {
  margin: 50px auto;
  background-color: rgba(0, 0, 0, 0.6);
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}


/* Clearfix */

.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

*:first-child+html .group {
  zoom: 1;
}


/* IE7 */


/* Example One */

#example-one {
  margin: 0 auto;
  list-style: none;
  position: relative;
  width: 200px;
}

#example-one a {
  color: #bbb;
  font-size: 14px;
  padding: 6px 10px 4px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#example-one a:hover {
  color: white;
}

#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}

.current_page_item a {
  color: white !important;
}

.ie6 #magic-line {
  bottom: -3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul class="group" id="example-one">
    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
    <li class="" data-target="about"><a href="index.php#about">About</a></li>
    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
    <li class="" data-target="news"><a href="index.php#news">News</a></li>
    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
  </ul>
</div>

But this is actually all you need. The rest is unnecessary:

#example-one {
  margin: 0 auto;
  align-self: center;
  list-style: none;
  position: relative;
}

#example-one a {
  color: #bbb;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

#example-one li {
  padding: 6px 10px 4px 10px;
}

#example-one a:hover {
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul class="group" id="example-one">
    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
    <li class="" data-target="about"><a href="index.php#about">About</a></li>
    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
    <li class="" data-target="news"><a href="index.php#news">News</a></li>
    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
  </ul>
</div>

I would also rework your orange line. You don't need JS/jQuery for this. Just use CSS.

Upvotes: 0

Related Questions