CODEWITHSUNDEEP
jquerycss
Ven Nilson
Ven Nilson

Reputation: 1019

Tabs events doesn't fire correctly

Guys I'm facing a problem in making mega menu tabs, What I'm doing is there are tabs when we hover on those tabs behind the scenes mouseenter event is fire and a css class with the name .active is added on tabs and tabs pane. All works fine but when behind the scenes mouseleave event is fire on tabs user cannot move its mouse towards tabs pane. I want to hide tabs pane when mouse position is out of the boundary of tabs and tabs pane. Does my events are correct? 

$(document).ready(function () {
        // Select all tabs nav li items.
        var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
        // div panes array which is all tabs pane that will show on hover
        var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

        navs.on('mouseenter', function (e) {
            e.stopPropagation();
            e.preventDefault();
            // remove active class from all tabs
            navs.removeClass('active');
            // add class active on current tab
            $(this).addClass('active');
            // remove active class from all tabs pane
            panes.hide(0).removeClass('active');
            // add class on current tab pane
            $(panes[$(this).index()]).show(0).addClass('active');
        });


        navs.on('mouseleave', function (e) {
            e.stopPropagation();
            e.preventDefault();
            // remove active class from all tabs
            navs.removeClass('active');
            // remove active class from all tabs pane
            panes.hide(0).removeClass('active');

        });

    });
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
        }

        .container {
            width: 80%;
        }

        .megamenu-tabs {
            width: 100%;
            float: left;
            display: block;
            margin: 30px;

        }

        .megamenu-tabs-nav {
            width: 20%;
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
        }

        .megamenu-tabs-nav > li > a {
            width: 100%;
            padding: 10px 16px;
            float: left;
            word-wrap: break-word;
            font-size: 13px;
            text-decoration: none;
            color: #666;
            border: 1px solid #f0f0f0;
            outline: 0;
            background-color: #fff;
        }

        .megamenu-tabs-nav > li.active a,
        .megamenu-tabs-nav > li:hover a {
            background-color: #f3f3f3;
        }

        .megamenu-tabs-pane {
            width: 80%;
            min-height: 30px;
            padding: 20px;
            float: right;
            display: none;
            opacity: 0;
            font-size: 13px;
            color: #666;
            border: 1px solid #f0f0f0;
            background-color: #fff;
        }

        .megamenu-tabs-pane.active {
            display: block;
            opacity: 1;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div class="container">
    <div class="megamenu-tabs">
        <ul class="megamenu-tabs-nav">
            <li><a href="#">Clothing</a></li>
            <li><a href="#">Gadgets</a></li>
            <li><a href="#">Mobiles & Smart Phones</a></li>
        </ul>

        <div class="megamenu-tabs-pane">

            <p>Clothing Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard
                dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It
                has
                survived not only five centuries, but also the leap into
                electronic
                typesetting, remaining essentially unchanged. It was popularised
                in
                the 1960s with the release of Letraset sheets containing Lorem
                Ipsum
                passages, and more recently with desktop publishing software
                like
                Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
        </div> <!-- close megamenu-tabs-pane 1 -->

        <div class="megamenu-tabs-pane">

            <p>Gadgets Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard
                dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It
                has
                survived not only five centuries, but also the leap into
                electronic
                typesetting, remaining essentially unchanged. It was popularised
                in
                the 1960s with the release of Letraset sheets containing Lorem
                Ipsum
                passages, and more recently with desktop publishing software
                like
                Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
        </div> <!-- close megamenu-tabs-pane 2 -->

        <div class="megamenu-tabs-pane">

            <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an
                unknown
                printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also
                the
                leap into electronic typesetting, remaining essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset
                sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                <a href="#">Lorem Ipsum</a>.</p>
        </div> <!-- close megamenu-tabs-pane 3-->

    </div> <!-- close megamenu-tabs -->
</div> <!-- close container div -->
</body>

Upvotes: 1

Views: 44

Answers (2)

Temani Afif
Temani Afif

Reputation: 273086

You need to remove the show(0) and hide(0) and add a small CSS to make sure tabs remain open when you navigate on them (hover on them) :

.megamenu-tabs-pane:hover {
display: block;
  opacity: 1;
}

Full code :

$(document).ready(function() {
  // Select all tabs nav li items.
  var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
  // div panes array which is all tabs pane that will show on hover
  var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

  navs.on('mouseenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // add class active on current tab
    $(this).addClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');
    // add class on current tab pane
    $(panes[$(this).index()]).addClass('active');
  });


  navs.on('mouseleave', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // remove active class from all tabs pane
    panes.removeClass('active');

  });

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
}

.container {
  width: 80%;
}

.megamenu-tabs {
  width: 100%;
  float: left;
  display: block;
  margin: 30px;
}

.megamenu-tabs-nav {
  width: 20%;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.megamenu-tabs-nav>li>a {
  width: 100%;
  padding: 10px 16px;
  float: left;
  word-wrap: break-word;
  font-size: 13px;
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  outline: 0;
  background-color: #fff;
}

.megamenu-tabs-nav>li.active a,
.megamenu-tabs-nav>li:hover a {
  background-color: #f3f3f3;
}

.megamenu-tabs-pane {
  width: 80%;
  min-height: 30px;
  padding: 20px;
  float: right;
  display: none;
  opacity: 0;
  font-size: 13px;
  color: #666;
  border: 1px solid #f0f0f0;
  background-color: #fff;
}

.megamenu-tabs-pane:hover {
  display: block;
  opacity: 1;
}

.megamenu-tabs-pane.active {
  display: block;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="megamenu-tabs">
      <ul class="megamenu-tabs-nav">
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><a href="#">Mobiles & Smart Phones</a></li>
      </ul>

      <div class="megamenu-tabs-pane">

        <p>Clothing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
      </div>
      <!-- close megamenu-tabs-pane 1 -->

      <div class="megamenu-tabs-pane">

        <p>Gadgets Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 2 -->

      <div class="megamenu-tabs-pane">

        <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including versions of
          <a href="#">Lorem Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 3-->

    </div>
    <!-- close megamenu-tabs -->
  </div>
  <!-- close container div -->
</body>

Upvotes: 2

user7207170
user7207170

Reputation:

Add this "var navs2 = $('.megamenu-tabs,.megamenu-tabs-pane');" and change on mouseleave on navs2. This way it won't hide as soon as you hover out of the navs tabs, instead when you hover out of either of .megamenu-tabs, .megamenu-tabs-pane.

$(document).ready(function() {
  // Select all tabs nav li items.
  var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
  var navs2 = $('.megamenu-tabs,.megamenu-tabs-pane');
  // div panes array which is all tabs pane that will show on hover
  var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');

  navs.on('mouseenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // add class active on current tab
    $(this).addClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');
    // add class on current tab pane
    $(panes[$(this).index()]).show(0).addClass('active');
  });


  navs2.on('mouseleave', function(e) {
    e.stopPropagation();
    e.preventDefault();
    // remove active class from all tabs
    navs.removeClass('active');
    // remove active class from all tabs pane
    panes.hide(0).removeClass('active');

  });

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
}

.container {
  width: 80%;
}

.megamenu-tabs {
  width: 100%;
  float: left;
  display: block;
  margin: 30px;
}

.megamenu-tabs-nav {
  width: 20%;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.megamenu-tabs-nav>li>a {
  width: 100%;
  padding: 10px 16px;
  float: left;
  word-wrap: break-word;
  font-size: 13px;
  text-decoration: none;
  color: #666;
  border: 1px solid #f0f0f0;
  outline: 0;
  background-color: #fff;
}

.megamenu-tabs-nav>li.active a,
.megamenu-tabs-nav>li:hover a {
  background-color: #f3f3f3;
}

.megamenu-tabs-pane {
  width: 80%;
  min-height: 30px;
  padding: 20px;
  float: right;
  display: none;
  opacity: 0;
  font-size: 13px;
  color: #666;
  border: 1px solid #f0f0f0;
  background-color: #fff;
}

.megamenu-tabs-pane.active {
  display: block;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="megamenu-tabs">
      <ul class="megamenu-tabs-nav">
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gadgets</a></li>
        <li><a href="#">Mobiles & Smart Phones</a></li>
      </ul>

      <div class="megamenu-tabs-pane">

        <p>Clothing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a> .</p>
      </div>
      <!-- close megamenu-tabs-pane 1 -->

      <div class="megamenu-tabs-pane">

        <p>Gadgets Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of <a href="#">Lorem
                    Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 2 -->

      <div class="megamenu-tabs-pane">

        <p>Mobiles & Smart Phones Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including versions of
          <a href="#">Lorem Ipsum</a>.</p>
      </div>
      <!-- close megamenu-tabs-pane 3-->

    </div>
    <!-- close megamenu-tabs -->
  </div>
  <!-- close container div -->
</body>

Upvotes: 0

Related Questions