Vertical menu sliding animation doesn't work properly - Shopify

Livinda
March 9, 2017
105 views
3 votes
3 Answers

I was working on a vertical menu navigation but when the menu is hovered the vertical line doesn’t slide on the right place. Also, when it’s clicked the vertical line won’t stay. Does anyone have a solution for these bugs?

function selectNav(get_this){
  $('#sticky li').removeClass('selected');
  get_this.classList.add('selected');
}

.in-page-menu > .in-page-menu li{

  line-height: 2em;
  height: 2em;

}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 40px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}
.in-page-menu li.selected::after{
  transform: translateY(-2.5em);
}
.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0.5em) !important;
}

.in-page-menu li:nth-child(2):hover ~ li:last-child::after {
  transform:translateY(83px) !important;

}
.in-page-menu li:nth-child(2).selected ~  li:last-child::after {
  transform:translateY(83px) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(7.5em) !important;
}
.in-page-menu li:nth-child(3).selected ~  li:last-child::after {
  transform:translateY(7.5em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(10.5em) !important;
}
.in-page-menu li:nth-child(4).selected ~  li:last-child::after {
  transform:translateY(10.5em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(237px) !important;
}
.in-page-menu li:nth-child(5).selected ~  li:last-child::after {
  transform:translateY(237px);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>

DEMO

So, I would like it to look like this: SHOPIFY

I’ve also made the demo on jsfiddle. Thank you so much!
Your help will be appreciated 🙂

Answers

There were multiple issues with your code. Here they are and the solution to them:

You didn’t include jQuery into your snippet (perhaps it was just on this site and not with your code). Included.
You have mixed em with px. That is never a good idea. Fixes:
- for the .in-page-menu li items, I made sure that their height is consistent by adding box-sizing: border-box, this will include any padding and border into the height calculation, otherwise it won’t.
- replaced all the px sizes with em, and made an educated guess about the positions. It might not be accurate, but it looks good for these items.
You always moved the vertical line which has been used for the hover.
- fixed it by removing the ~ li:last-child part from the selected class selector. This makes sure, that the selected menu item will always have a vertical line.
The Javascript had many issues. Fixed by:
- using jQuery addClass function to add the selected class.
- changed the selector for the removeClass line to find a match

Notes

Added some styling to initially hide the hover vertical line. If you wish to have a line when the page loads, add a selected class to the desired menu item.
If you intend to change your menu item heights, you will have to update the translateY positions as well.

Working demo

function selectNav(get_this){
  $('li.selected').removeClass('selected');
  $(get_this).addClass('selected');
}

.in-page-menu{
  list-style: none;
  padding-left: 0;
}

.in-page-menu > .in-page-menu li{
  line-height: 2em;
  height: 2em;
  box-sizing: border-box;
}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 8px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}

.in-page-menu li:last-child::after {
  visibility: hidden;
}

.in-page-menu li:hover ~ li:last-child::after {
  visibility: visible;
}

.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0) !important;
}

.in-page-menu li:nth-child(1).selected::after{
  transform: translateY(0) !important;
}

.in-page-menu li:nth-child(2):hover  ~ li:last-child::after{
  transform:translateY(3em) !important;

}
.in-page-menu li:nth-child(2).selected::after {
  transform:translateY(3em) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(6em) !important;
}
.in-page-menu li:nth-child(3).selected::after {
  transform:translateY(6em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(9em) !important;
}
.in-page-menu li:nth-child(4).selected::after {
  transform:translateY(9em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(12em) !important;
}
.in-page-menu li:nth-child(5).selected::after {
  transform:translateY(12em);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>

Your CSS is quite complicated for what you’re trying to achieve.

This isn’t exactly the same as the Shopify site, but might help you. There’s a lot going on. Let me know if you’ve any questions, or if I’ve misunderstood you…

jsfiddle

$(document).ready(function() {
  $("#sticky li a").click(function() {
    $('li a').removeClass("selected");
    $(this).addClass("selected");
  });
});

.in-page-menu {
  border-left: 2px solid lightgrey;
  margin-left: 0;
  padding-left: 0;
}

.in-page-menu li {
  list-style-type: none;
}

.sticky-menu-link {
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: #767676;
  font-size: 14px;
  transition: all 150ms;
  padding: 1em;
  display: block;
}

.sticky-menu-link:hover {
  border-left-color: rgba(255, 99, 71, 0.6);
}

.selected {
  border-left-color: rgba(255, 99, 71, 0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
  <li>
    <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#inventory">Inventory management</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
  </li>
  <li></li>
</ul>

As posted by beerwin. I made some changes too to achieve the result

Added jQuery
Replaced px with em
Translated with respect to the height of the li
Removed the style definition for li.selected::after

Here is the updated JSFIDDLE

$('#sticky li').on("click", function() {
	$("#sticky li").removeClass("selected");
	$(this).addClass("selected");
});

.in-page-menu > li {
  line-height: 2em;
  height: 2em;
  list-style-type: none;
}

.in-page-menu > li > a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2em;
  margin-top: 15px;
  left: 40px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}

.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform: translateY(0px) !important;
}

.in-page-menu li:nth-child(1).selected ~ li:last-child::after {
  transform: translateY(0px);
}

.in-page-menu li:nth-child(2):hover ~ li:last-child::after {
  transform: translateY(2em) !important;
}

.in-page-menu li:nth-child(2).selected ~ li:last-child::after {
  transform: translateY(2em) !important;
}

.in-page-menu li:nth-child(3):hover ~ li:last-child::after {
  transform: translateY(4em) !important;
}

.in-page-menu li:nth-child(3).selected ~ li:last-child::after {
  transform: translateY(4em);
}

.in-page-menu li:nth-child(4):hover ~ li:last-child::after {
  transform: translateY(6em) !important;
}

.in-page-menu li:nth-child(4).selected ~ li:last-child::after {
  transform: translateY(6em);
}

.in-page-menu li:nth-child(5):hover ~ li:last-child::after {
  transform: translateY(8em) !important;
}

.in-page-menu li:nth-child(5).selected ~ li:last-child::after {
  transform: translateY(8em);
}

.in-page-menu--vertical a {
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}

.in-page-menu a {
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a {
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a {
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
  <li>
    <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#inventory">Inventory management</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
  </li>
  <li></li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.

Vertical menu sliding animation doesn't work properly – Shopify

Answers