Issue with Responsive Menu

Question

So i created a responsive menu but it has some weird behavior. Example of fiddle

$('ul.page-menu-nav').each(function () {
  var $ul = $(this);
  var $links = $(this).find('a');
  var $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);

  $active.addClass('active');

  var $content = $($active[0].hash);

  $links.not($active).each(function () {
    $(this.hash).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function (e) {
    debugger;
    if($(this).parent().hasClass('icon')) {
      return;
    }

    $ul.removeClass('responsive');
    $active.removeClass('active');
    $content.hide();

    $active = $(this);
    $content = $(this.hash);

    $active.addClass('active');
    $content.show();


    e.preventDefault();
  });
});


function toggleMenu() {
  var $nav = $("#myTopnav");

  if ($nav.attr('class') == "page-menu-nav clearfix") {
    $nav.addClass('responsive');
  } else {
    $nav.removeClass();
    $nav.addClass('page-menu-nav clearfix');
  }
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


ul.page-menu-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color:#333;
  border-bottom: 3px solid #e6e6e6; 
  min-height: 48px;
}
ul.page-menu-nav li a.active {
  border-bottom: 3px solid #337ab7;
}

ul.page-menu-nav li {float: left;}

ul.page-menu-nav li a {
  display: inline-block;
  color:#333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-bottom:-3px;
  position:relative;
}

ul.page-menu-nav li a:hover {
  border-bottom: 3px solid #337ab7;
}

ul.page-menu-nav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.page-menu-nav li:not(:first-child) {display: none;}
  ul.page-menu-nav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.page-menu-nav.responsive {position: relative;}
  ul.page-menu-nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.page-menu-nav.responsive li {
    float: none;
    display: inline;
  }
  ul.page-menu-nav.responsive li a {
    display: block;
    text-align: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="page-menu-nav clearfix" id="myTopnav">
  <li><a class="active" href="#home">Publish</a></li>
  <li><a href="#news">Post Activity</a></li>
  <li><a href="#contact">Content Library</a></li>
  <li><a href="#about">Post Calendar</a></li>
  <li><a href="#about">Profile Manager</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="toggleMenu()">☰</a>
  </li>
</ul>

When in responsive mode i need the active item to show, right now Publish always shows when you select another item

What would be the best way to accomplish this?

Answer 1

In addition to Rahul's answer - to reorder the list : You can give your list items custom data attributes

var menu = $("ul.page-menu-nav");
var mList = $(menu).find('li');
$(mList).each(function(i){
    $(this).attr("data-sort", i);
});

Then use sort to restore the original order when not in responsive mode

$(mList).detach().sort(function() {
  return $(mList).data('sort');  
});

$(menu).append($(mList));

Implementation example :

var smallBreak = 680; // Your small screen breakpoint in pixels
$( window ).resize(function() {
    if ($(window).width() > smallBreak) {
        $(mList).detach().sort(function() {
          return $(mList).data('sort');  
        });

        $(menu).append($(mList));
    }
});

Good Luck :)

Answer 2

Please check below snippet. It is working as your requirement.

$('ul.page-menu-nav').each(function () {
  var $ul = $(this);
  var $links = $(this).find('a');
  var $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);

  $active.addClass('active');

  var $content = $($active[0].hash);

  $links.not($active).each(function () {
    $(this.hash).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function (e) {
    debugger;
    if($(this).parent().hasClass('icon')) {
      return;
    }

    $ul.removeClass('responsive');
    $active.removeClass('active');
    //$active.parent().hide();
    //$content.hide();

    $active = $(this);
    //$content = $(this.hash);

    $active.addClass('active');
    //$active.parent().show();

    $("#myTopnav li:eq(0)").before($(this).parent());
    e.preventDefault();
  });
});


function toggleMenu() {
  var $nav = $("#myTopnav");

  if ($nav.attr('class') == "page-menu-nav clearfix") {
    $nav.addClass('responsive');
  } else {
    $nav.removeClass();
    $nav.addClass('page-menu-nav clearfix');
  }
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


ul.page-menu-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color:#333;
  border-bottom: 3px solid #e6e6e6; 
  min-height: 48px;
}
ul.page-menu-nav li a.active {
  border-bottom: 3px solid #337ab7;
}

ul.page-menu-nav li {float: left;}

ul.page-menu-nav li a {
  display: inline-block;
  color:#333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-bottom:-3px;
  position:relative;
}

ul.page-menu-nav li a:hover {
  border-bottom: 3px solid #337ab7;
}

ul.page-menu-nav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.page-menu-nav li:not(:first-child) {display: none;}
  ul.page-menu-nav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.page-menu-nav.responsive {position: relative;}
  ul.page-menu-nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.page-menu-nav.responsive li {
    float: none;
    display: inline;
  }
  ul.page-menu-nav.responsive li a {
    display: block;
    text-align: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="page-menu-nav clearfix" id="myTopnav">
  <li><a class="active" href="#home">Publish</a></li>
  <li><a href="#news">Post Activity</a></li>
  <li><a href="#contact">Content Library</a></li>
  <li><a href="#about">Post Calendar</a></li>
  <li><a href="#about">Profile Manager</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="toggleMenu()">☰</a>
  </li>
</ul>