إضافة قائمة أفقية باحتراف 2015

بسم الله الرحمن الرحيم اخبارك ايه متابعي مدونه  أكتشف قوالب بلوجر 
 يارب تكونوا بخير  كما وعدنامك باحدث اضافات بلوجر  اليوم نقدم لكم
إضافة قائمة أفقية

شاهد الشرح علي اليوتويب

نبحث عن الكود التالي 
]]></b:skin>
ونضيف الكود التالي قبله

nav {    display: block;    margin-top: 100px;    background: #374147;}
.menu {    display: block;}
.menu li {    display: inline-block;    position: relative;    z-index: 100;}
.menu li:first-child {    margin-left: 0;}
.menu li a {    font-weight: 600;    text-decoration: none;    padding: 20px 15px;    display: block;    color: #fff;    transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {    color: #fff;    background: #9ca3da;}
.menu ul {    visibility: hidden;    opacity: 0;    margin: 0;    padding: 0;    width: 150px;    position: absolute;    left: 0px;    background: #fff;    z-index: 99;    transform: translate(0,20px);    transition: all 0.2s ease-out;}
.menu ul:after {    bottom: 100%;    left: 20%;    border: solid transparent;    content: " ";    height: 0;    width: 0;    position: absolute;    pointer-events: none;    border-color: rgba(255, 255, 255, 0);    border-bottom-color: #fff;    border-width: 6px;    margin-left: -6px;}
.menu ul li {    display: block;    float: none;    background: none;    margin: 0;    padding: 0;}
.menu ul li a {    font-size: 12px;    font-weight: normal;    display: block;    color: #797979;    background: #fff;}.menu ul li a:hover,.menu ul li:hover>a {    background: #9ca3da;    color: #fff;}.menu li:hover>ul {    visibility: visible;    opacity: 1;    transform: translate(0,0);}.menu ul ul {    right: 149px;    top: 0px;    visibility: hidden;    opacity: 0;    transform: translate(20px,20px);    transition: all 0.2s ease-out;}.menu ul ul:after {    left: -6px;    top: 10%;    border: solid transparent;    content: " ";    height: 0;    width: 0;    position: absolute;    pointer-events: none;    border-color: rgba(255, 255, 255, 0);    border-right-color: #fff;    border-width: 6px;    margin-top: -6px;}.menu li>ul ul:hover {    visibility: visible;    opacity: 1;    transform: translate(0,0);}.responsive-menu {    display: none;    width: 100%;    padding: 20px 15px;    background: #374147;    color: #fff;    text-transform: uppercase;    font-weight: 600;}.responsive-menu:hover {    background: #374147;    color: #fff;    text-decoration: none;}a.homer {    background: #9ca3da;}@media (min-width: 768px) and (max-width: 979px) {    .mainWrap {        width: 768px;    }    .menu ul {        top: 37px;    }    .menu li a {        font-size: 12px;    }    a.homer {        background: #374147;    }}@media (max-width: 767px) {    .mainWrap {        width: auto;        padding: 50px 20px;    }    .menu {        display: none;    }    .responsive-menu {        display: block;        margin-top: 100px;    }    nav {        margin: 0;        background: none;    }    .menu li {        display: block;        margin: 0;    }    .menu li a {        background: #fff;        color: #797979;    }    .menu li a:hover,.menu li:hover>a {        background: #9ca3da;        color: #fff;    .menu ul {        visibility: hidden;        opacity: 0;        top: 0;        left: 0;        width: 100%;        transform: initial;    }    .menu li:hover>ul {        visibility: visible;        opacity: 1;        position: relative;        transform: initial;    }    .menu ul ul {        left: 0;        transform: initial;    }    .menu li>ul ul:hover {        transform: initial;    }}@media (max-width: 480px) {}@media (max-width: 320px) {}

ثم نبحث عن
 header-wrapper
ثم نغلق الوسم لانتسو اغلاق الوسم ونضيف الكود التالي بعده 

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>  
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>
  

ثم نبحث عن
 </body>
ونضع فوقه الكود التالي

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>
  </script>

ثم نحفظ القالب
ومروك عليكم القائمه

يارب يكون الشرح بسيط :] ومفيد
القائمه متوفقه مع جميع الاجهزه كمي رايتم

يرجي عدم النقل بدوم ذكر المصدر

قالب مدونه شخصيه،افضل تطبيقات الاندرويد المجانية،قوالب بلوجر 2015,قوالب ووردبريس مجانيه,تصميم قالب بلوجر من الالف الى الياء,ارتيستير كامل,قوالب احترافية,قالب أنيق وسريع التصفح,ثيم بلوجر,قوالب مجانية,قالب مجله,PSD بلوجر,انشاء موقع الكتروني,تصميم موقع الكتروني,انشاء مدونة بلوجر,تصميم متجر الكتروني مجاني,انشاء مدونة مجانية,اجمل تطبيقات الاندرويد,قالب كلاسيك,قوالب معربة,تطبيقات الاندرويد 2015,قوالب ارمينيا,أفضل تطبيقات الأندرويد المجانيه,قالب سيو,قالب صديق لمحركات البحث,حماية قوالب بلوجر,احسن تطبيقات الاندرويد,قوالب ووردبريس مجانية,افضل برامج الاندرويد المجانية,قالب بلوجر مدفوع مجاني,قوالب متجاوبه,افضل قوالب بلوجر لعام 2015,ثيم فورست,تعريب قوالب بلوجر مجانا,ألوان فلات متناسقة ومريحة للعين