كود قائمة الازرار

⊱Queen⊰ كتب:

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين

أريد كود قائمة ازرار

اي عند الضغط مثلا على زر تظهر قائمة 

بانتظاركم وشكرا

الكود:


 
<style type="text/css">

 
   
/* Remove dark-nav class from nav tag to see the light version  */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  font-family: Sans-serif;
}

body {
  font-size: 14px;
}

header {
  height: 100vh;
}

.nav {
  background-color: #f8f8f8;
  border-bottom: 1px solid #ececec;
  min-height: 50px;
  height: auto;
  /* Start menu */
}
.nav .container {
  width: 1170px;
  margin: auto;
}
.nav .container:after, .nav .container:before {
  content: "";
  display: block;
  clear: both;
}
.nav .nav-heading {
  float: left;
}
.nav .nav-heading .toggle-nav {
  padding: 2px 10px;
  border-radius: 5px;
  border: none;
  display: none;
  background-color: transparent;
}
.nav .nav-heading > a {
  text-decoration: none;
  color: #000;
  line-height: 60px;
  font-weight: 400;
  font-size: 19px;
  font-weight: 300;
}
.nav .menu {
  float: right;
}
.nav .menu:after {
  content: "";
  clear: both;
  display: block;
}
.nav .list {
  float: right;
  margin: 0;
}
.nav .list > li {
  float: left;
  list-style: none;
}
.nav .list > li > a {
  color: #555;
  text-decoration: none;
  display: block;
  line-height: 60px;
  padding: 0 10px;
}
.nav .list > li > a:hover,
.nav .list > li > a .nav .list > li.active > a {
  color: #333;
}
.nav .list .categories .drop-down {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFF;
  border: 1px solid #ccc;
  padding: 5px 0;
  min-width: 160px;
  width: auto;
  white-space: nowrap;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
  z-index: 99999;
}
.nav .list .drop-down > .seprator {
  height: 1px;
  width: 100%;
  margin: 9px 0;
  background-color: #e5e5e5;
}
.nav .categories {
  position: relative;
}

.drop-down > li > a {
  color: #333;
  display: block;
  padding: 3px 20px;
  text-decoration: none;
}

.show {
  display: block !important;
}

/* Sub dropdown menu */
.categories .drop-down .sub-drop-down {
  position: relative;
}

.categories .drop-down .sub-drop-down:hover .sub-dropdown {
  display: block;
}

.categories .drop-down .sub-dropdown {
  position: absolute;
  top: -20px;
  left: 107%;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
}

.categories .drop-down .sub-dropdown:before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: -20px;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #cccccc;
}

.categories .drop-down .sub-dropdown > li > a {
  color: #555;
  padding: 5px 0;
  display: block;
}

/* End sub dropdown menu */
/* Dark theme */
.dark-nav {
  background-color: #2f3340;
}

.dark-nav .list > li > a {
  color: #BBB;
}

.dark-nav .list > li > a:hover,
.dark-nav .list > li.active > a {
  color: #FFF;
}

.dark-nav .nav-heading > a {
  color: #EEE;
}

.dark-nav .nav-heading .toggle-nav {
  color: #EEE;
}

/* End Dark theme */
/* Start media query for navbar */
@media (max-width: 767px) {
  .nav .container {
    padding-right: 0;
    padding-left: 0;
  }

  .nav .nav-heading {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid #e7e7e7;
  }

  .nav .nav-heading .brand {
    float: left;
  }

  .nav .nav-heading .toggle-nav {
    display: block;
    float: right;
    margin-top: 14px;
  }

  .nav .menu {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
  }

  .nav .list {
    float: none;
    width: 100%;
  }

  .nav .list > li {
    float: none;
    width: 100%;
  }

  .nav .list > li > a {
    padding: 12px 0;
    line-height: 1;
  }

  .nav .list .categories .drop-down {
    background-color: transparent;
    border: none;
    position: static;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
  }

  .categories .drop-down .sub-dropdown {
    position: static;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 20px;
  }

  .categories .drop-down .sub-dropdown > li > a {
    color: #888;
  }

  .categories .drop-down .sub-dropdown:before {
    display: none;
  }

  /* Simple reset for dark theme */
  .dark-nav .menu {
    background-color: #252831;
  }

  .dark-nav .nav-heading {
    border-bottom-color: #31343c;
  }

  .dark-nav .list .drop-down > li > a {
    color: #AAA;
  }

  .dark-nav .list .categories .drop-down .seprator {
    background-color: #2a2d38;
  }
}

    </style>
 
  <script type="text/javascript">
 
  $(function () {
  'use strict';

  // Add class active when the user clicks the lis of the menu
  $('.nav .list li').on('click', 'a', function () {
    $(this).parent().addClass('active').siblings().removeClass('active');
  });


  var openCategories = $('.nav #open-categories'),
      categories = $('.drop-down');

  // Toggle categories on clicking
  openCategories.on('click', function () {
    $("#" + $(this).data('dropdown')).toggleClass('show');
    // When the user clicks the window if the categories is not the target, close it.
    $(window).on('mouseup', function (e) {
      if ( categories.hasClass('show')
          && ! categories.is(e.target)
          && categories.has(e.target).length === 0
          && ! openCategories.is(e.target) ) {
        categories.removeClass('show');
      }
    });
  });


  // Toggle menu, This will be shown in Extra small screens only
  $('.nav .toggle-nav').on('click', function () {
    $( "#" + $(this).data('toggle') ).slideToggle(300);
  });

});
 
  </script>
     


  <nav class="nav">
    <div class="container">
      <div class="nav-heading">
        <button class="toggle-nav" data-toggle="open-navbar1"><i class="fa fa-align-right"></i></button>
        <a class="brand" href="#">اسم موقعك</a>
      </div>
      <div class="menu" id="open-navbar1">
        <ul class="list">
<li><a href="#">رابط</a></li>
          <li class="categories"><a href="#" id="open-categories" data-dropdown="target" href="#">قائمه<i class="fa fa-caret-down"></i></a>
            <ul class="drop-down" id="target">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
              <li class="sub-drop-down"><a href="#">قائمه</a>
                <ul class="sub-dropdown">
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li class="speprator"></li>
                  <li><a href="#">رابط</a></li>
                </ul>
              </li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
            </ul>
          </li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">الرئيسيه</a></li>
        </ul>
      </div>
    </div>
  </nav>

       

 

الطائرالحر كتب:

⊱Queen⊰ كتب:

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين

أريد كود قائمة ازرار

اي عند الضغط مثلا على زر تظهر قائمة 

بانتظاركم وشكرا

وعليكم السلام 

اتفضل 

الكود:


  
<style type="text/css">

  
    
/* Remove dark-nav class from nav tag to see the light version  */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  font-family: Sans-serif;
}

body {
  font-size: 14px;
}

header {
  height: 100vh;
}

.nav {
  background-color: #f8f8f8;
  border-bottom: 1px solid #ececec;
  min-height: 50px;
  height: auto;
  /* Start menu */
}
.nav .container {
  width: 1170px;
  margin: auto;
}
.nav .container:after, .nav .container:before {
  content: "";
  display: block;
  clear: both;
}
.nav .nav-heading {
  float: left;
}
.nav .nav-heading .toggle-nav {
  padding: 2px 10px;
  border-radius: 5px;
  border: none;
  display: none;
  background-color: transparent;
}
.nav .nav-heading > a {
  text-decoration: none;
  color: #000;
  line-height: 60px;
  font-weight: 400;
  font-size: 19px;
  font-weight: 300;
}
.nav .menu {
  float: right;
}
.nav .menu:after {
  content: "";
  clear: both;
  display: block;
}
.nav .list {
  float: right;
  margin: 0;
}
.nav .list > li {
  float: left;
  list-style: none;
}
.nav .list > li > a {
  color: #555;
  text-decoration: none;
  display: block;
  line-height: 60px;
  padding: 0 10px;
}
.nav .list > li > a:hover,
.nav .list > li > a .nav .list > li.active > a {
  color: #333;
}
.nav .list .categories .drop-down {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFF;
  border: 1px solid #ccc;
  padding: 5px 0;
  min-width: 160px;
  width: auto;
  white-space: nowrap;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
  z-index: 99999;
}
.nav .list .drop-down > .seprator {
  height: 1px;
  width: 100%;
  margin: 9px 0;
  background-color: #e5e5e5;
}
.nav .categories {
  position: relative;
}

.drop-down > li > a {
  color: #333;
  display: block;
  padding: 3px 20px;
  text-decoration: none;
}

.show {
  display: block !important;
}

/* Sub dropdown menu */
.categories .drop-down .sub-drop-down {
  position: relative;
}

.categories .drop-down .sub-drop-down:hover .sub-dropdown {
  display: block;
}

.categories .drop-down .sub-dropdown {
  position: absolute;
  top: -20px;
  left: 107%;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
}

.categories .drop-down .sub-dropdown:before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: -20px;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #cccccc;
}

.categories .drop-down .sub-dropdown > li > a {
  color: #555;
  padding: 5px 0;
  display: block;
}

/* End sub dropdown menu */
/* Dark theme */
.dark-nav {
  background-color: #2f3340;
}

.dark-nav .list > li > a {
  color: #BBB;
}

.dark-nav .list > li > a:hover,
.dark-nav .list > li.active > a {
  color: #FFF;
}

.dark-nav .nav-heading > a {
  color: #EEE;
}

.dark-nav .nav-heading .toggle-nav {
  color: #EEE;
}

/* End Dark theme */
/* Start media query for navbar */
@media (max-width: 767px) {
  .nav .container {
    padding-right: 0;
    padding-left: 0;
  }

  .nav .nav-heading {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid #e7e7e7;
  }

  .nav .nav-heading .brand {
    float: left;
  }

  .nav .nav-heading .toggle-nav {
    display: block;
    float: right;
    margin-top: 14px;
  }

  .nav .menu {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
  }

  .nav .list {
    float: none;
    width: 100%;
  }

  .nav .list > li {
    float: none;
    width: 100%;
  }

  .nav .list > li > a {
    padding: 12px 0;
    line-height: 1;
  }

  .nav .list .categories .drop-down {
    background-color: transparent;
    border: none;
    position: static;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
  }

  .categories .drop-down .sub-dropdown {
    position: static;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 20px;
  }

  .categories .drop-down .sub-dropdown > li > a {
    color: #888;
  }

  .categories .drop-down .sub-dropdown:before {
    display: none;
  }

  /* Simple reset for dark theme */
  .dark-nav .menu {
    background-color: #252831;
  }

  .dark-nav .nav-heading {
    border-bottom-color: #31343c;
  }

  .dark-nav .list .drop-down > li > a {
    color: #AAA;
  }

  .dark-nav .list .categories .drop-down .seprator {
    background-color: #2a2d38;
  }
}

    </style>
  
  <script type="text/javascript">
  
  $(function () {
  'use strict';

  // Add class active when the user clicks the lis of the menu
  $('.nav .list li').on('click', 'a', function () {
    $(this).parent().addClass('active').siblings().removeClass('active');
  });


  var openCategories = $('.nav #open-categories'),
      categories = $('.drop-down');

  // Toggle categories on clicking
  openCategories.on('click', function () {
    $("#" + $(this).data('dropdown')).toggleClass('show');
    // When the user clicks the window if the categories is not the target, close it.
    $(window).on('mouseup', function (e) {
      if ( categories.hasClass('show')
          && ! categories.is(e.target)
          && categories.has(e.target).length === 0
          && ! openCategories.is(e.target) ) {
        categories.removeClass('show');
      }
    });
  });


  // Toggle menu, This will be shown in Extra small screens only
  $('.nav .toggle-nav').on('click', function () {
    $( "#" + $(this).data('toggle') ).slideToggle(300);
  });

});
  
  </script>
      


  <nav class="nav">
    <div class="container">
      <div class="nav-heading">
        <button class="toggle-nav" data-toggle="open-navbar1"><i class="fa fa-align-right"></i></button>
        <a class="brand" href="#">اسم موقعك</a>
      </div>
      <div class="menu" id="open-navbar1">
        <ul class="list">
<li><a href="#">رابط</a></li>
          <li class="categories"><a href="#" id="open-categories" data-dropdown="target" href="#">قائمه<i class="fa fa-caret-down"></i></a>
            <ul class="drop-down" id="target">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
              <li class="sub-drop-down"><a href="#">قائمه</a>
                <ul class="sub-dropdown">
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li class="speprator"></li>
                  <li><a href="#">رابط</a></li>
                </ul>
              </li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
            </ul>
          </li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">الرئيسيه</a></li>
        </ul>
      </div>
    </div>
  </nav>