26‏/11‏/2016

إضافة قائمة افقية منسدلة متجاوبة تعمل على الهواتف CSS HTML

هذا الدرس سنرى فيه طريقة اضافة قائمة افقية متجاوبة Responsive menu، والتي تعمل على الهواتف الذكية والأجهزة اللوحية.

لماذا تحتاج مدونتك لقائمة متجاوبة

الجواب بسيط، الناس يستعملون اليوم أكثر فأكثر الهاوتف والأجهزة اللوحية لتصفح الإنترنت. إذا كان قالب مدونتك وتصميمها سيئا وغير متجاوب فأنت ميت. أضف إلى هذا أن القالب المتجاوب يساعد الزوار لتصفح المدونة بشكل سلس وسهل دون حاجة لإستعمال الحاسوب.

هذه القائمة بسيطة تظهر بشكل عادي عىل الحواسيب، وتتقلص عندما يتم التصفح من هاتف ذكي أو لوحي. كما توضح الصورة التالية:
شكل القائمة
قوائم قائمة أفقية منسدلة ومتجاوبة

طريقة اضافة القائمة على مدونات بلوجر

هذا الفيديو يشرح طرقة اضافة القائمة، ويمكنم ايجاد الأكواد في الأسفل:



أكواد html css javascript الخاصة بالقائمة

هذه هي الأكواد المستعملة مع الترتيب كما يظهر في الفيديو:
كود HTML لإضافته تحت راس الصفحة حيث عنوان المدونة
<div class='maxiwrap'>
<nav class='animenu'> 
  <button class='animenu__toggle'>
    <span class='animenu__toggle__bar'/>
    <span class='animenu__toggle__bar'/>
    <span class='animenu__toggle__bar'/>
  </button>
  <ul class='animenu__nav'> 
<li><a href='#' itemprop='url'><span itemprop='name'/>قائمة 1</a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة 3 منسدلة</span></a>
<ul class='animenu__nav__child'>
<li><a href='#' itemprop='url'><span itemprop='name'>قائمة ثانوية</span></a></li>
</ul>
</li>          
  </ul>
</nav>
</div>

كود CSS لإضافته فوق وسم </head>
<style>
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.animenu__toggle {
  display: none;
  cursor: pointer;
  background-color: #404040;
  border: 0;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.animenu__toggle:hover {
  background-color: #c5c5c5;
}

.animenu__toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
  transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
}
.animenu__toggle__bar + .animenu__toggle__bar {
  margin-top: 4px;
}

.animenu__toggle--active .animenu__toggle__bar {
  margin: 0;
  position: absolute;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
  opacity: 0;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animenu {
font-size: 0;
    padding: 0;
    margin: 0 auto;
    float: right;
}
.animenu ul {
  padding: 0;
  list-style: none;
  font: 0px 'Open Sans', Arial, Helvetica;
}
.animenu li, .animenu a {
  display: inline-block;
  font-size: 15px;
}
.animenu a {
display: block;
 display: block;
    text-transform: uppercase;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 17px;
    font-family: Droid Arabic Kufi;
    overflow: hidden;
    margin: 0 5px;
}

.animenu__nav {
  background-color: #404040;
}
.animenu__nav > li {
  position: relative;
  border-right: 1px solid #444444;
}
.animenu__nav > li > a {
  padding: 0px 15px;
  text-transform: uppercase;
}
.animenu__nav > li > a:first-child:nth-last-child(2):before {
content: "";
    position: absolute;
    border: 4px solid transparent;
    border-bottom: 0;
    border-top-color: currentColor;
    top: 80%;
    margin-top: -2px;
    left: 10px;
}
.animenu__nav > li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.animenu__nav > li:hover > a {
  color: #fff;
}

.animenu__nav__child {
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  margin: 20px 0 0 0;
  background-color: #373737;
  -webkit-transition: margin .15s, opacity .15s;
  transition: margin .15s, opacity .15s;
}
.animenu__nav__child > li {
  width: 100%;
  border-bottom: 1px solid #515151;
}
.animenu__nav__child > li:first-child > a:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  right: 1em;
  top: -6px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: inherit;
}
.animenu__nav__child > li:last-child {
  border: 0;
}
.animenu__nav__child a {
  padding: 10px;
  width: 100%;
  border-color: #373737;
}

@media screen and (max-width: 767px) {
  .animenu__toggle {
    display: inline-block;
  }

  .animenu__nav,
  .animenu__nav__child {
    display: none;
  }

  .animenu__nav {
    margin: 10px 0;
  }
  .animenu__nav > li {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #515151;
  }
  .animenu__nav > li:last-child {
    border: 0;
  }
  .animenu__nav > li:first-child > a:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: 1em;
    top: -6px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: inherit;
  }
  .animenu__nav > li > a {
    width: 100%;
    padding: 10px;
    border-color: #404040;
    position: relative;
  }
  .animenu__nav a:hover {
    background-color: #c5c5c5;
    border-color: #0186ba;
    color: #fff;
  }

  .animenu__nav__child {
    position: static;
    background-color: #373737;
    margin: 0;
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
  }
  .animenu__nav__child > li:first-child > a:after {
    content: none;
  }
  .animenu__nav__child a {
    padding-left: 20px;
    width: 100%;
  }
}
.animenu__nav--open {
  display: block !important;
}
.animenu__nav--open .animenu__nav__child {
  display: block;
}

</style>

كود Javascript لإضافته فوق وسم </body>
<script>
(function(){
  var animenuToggle = document.querySelector('.animenu__toggle'),
      animenuNav    = document.querySelector('.animenu__nav'),
      hasClass = function( elem, className ) {
        return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
      },
      toggleClass = function( elem, className ) {
        var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
        if( hasClass(elem, className ) ) {
          while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
            newClass = newClass.replace( ' ' + className + ' ' , ' ' );
          }
          elem.className = newClass.replace( /^\s+|\s+$/g, '' );
        } else {
          elem.className += ' ' + className;
        }
      },        
      animenuToggleNav =  function (){     
        toggleClass(animenuToggle, "animenu__toggle--active");
        toggleClass(animenuNav, "animenu__nav--open");     
      }

  if (!animenuToggle.addEventListener) {
      animenuToggle.attachEvent("onclick", animenuToggleNav);
  }
  else {
      animenuToggle.addEventListener('click', animenuToggleNav);
  }
})()
</script>


هذا كل ما يتعلق بدرس اضافة قوائم افقية منسدلة ومتجاوبة.

لكل اضافة أو استفسار أكتب تعليقك اسفله - جميع التعليقات المزعجة لن يتم نشرها