اضافة قائمة رئيسية متجاوبة وبتاثيرات رائعة

شرح طريقة التركيب

1. احتفظ بنسخة احتياطية من القالب لتجنب حدوث ايه مشاكل
2. توجه الى تحرير html 
3. تاكد اولا من حذف ستايل واكواد القائمة الموجودة عندك
4. ابحث عن </head> واضف الاكواد التالية قبله

<link href='https://cdn.rawgit.com/th3littleprof/elprof/master/amine.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
/*================================
             صندوق البحث
================================*/
.dialog-box button[type="submit"] {margin-top: 20px;    padding: 0.8em 2em;background-color: #D64545;   color: #FFFFFF;   border: none;   text-transform: uppercase;    -webkit-transition: all 0.3s;    -moz-transition: all 0.3s;    -ms-transition: all 0.3s;    -o-transition: all 0.3s;    transition: all 0.3s;}
.dialog-box input[type="text"] {  padding: 0 20px;font-size: 13px;   letter-spacing: 0.1em;color: #888; height: 50px;line-height: 1;background-color: #fff;border: 1px solid #ddd; -webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s; -o-transition: all 0.2s;transition: all 0.2s; box-sizing: border-box; width: 100%;}
.dialog-box h2 { margin: 0;font-weight: 400; font-size: 50px;padding: 32px 0 25px; color: #fff;  text-transform: uppercase;}
.dialog-box {max-width: 753px;min-width: 290px;padding: 20px;text-align: center;position: relative;z-index: 5;margin: auto;}
.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(55, 58, 71, 0.9);}
.overlay .overlay-close {width: 50px;height: 40px;position: absolute; right: 0px; top: 0px; border: none;  background: #E6E6E6; float: left; color: #353947;  outline: none;z-index: 100;}
.overlay .dialog-inner{ text-align: center; position: relative;top: 50%; height: 60%; -webkit-transform: translateY(-50%); transform: translateY(-30%);}
.overlay-mbl { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; z-index:100;}
.overlay-mbl.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;    animation: rubberBand 1s 1;}
.dialog-box button[type="submit"]:hover, {    background: #212121;}
#trigger-overlay { float: left; transition: 0.4s;margin-top: -54px;margin-left: 10px;}
#trigger-overlay a { color: #fff; text-decoration:none;font-size:30px;}
#trigger-overlay:hover {animation: jello 1s 1;}
i.fa.fa-search {float: right;display: block;background: #F74047;color: #fff;text-align: center;padding: 12px;margin-right: 10px;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
  .fa-search:before{font-size: 27px;}
/*================================
              القائمة
================================*/
#menu-wrapper{width:99.4%;border: 4px solid #fff;background: #29567D;font-family:El Messiri}
nav {display: block;float:center;margin:0px auto 0px auto;padding:0;}
.menu {display: block;margin:0px;padding:0px;}
.menu li {display: inline-block;position: relative;z-index: 100;padding:0px;margin:0px;text-align:right;font-size:14px;}
.menu li a:hover{  -webkit-animation:rubberBand .8s 1;  -moz-animation:rubberBand .8s 1;  -o-animation:rubberBand .8s 1;  animation:rubberBand .8s 1}
.menu li>ul li a{padding:7px 15px}
.menu li a {text-decoration: none;padding:15px;margin:0px;display: block;color: #fff;font-weight: 700;box-shadow: inset 0 3px 9px rgba(0,0,0,.25);}
.menu li a:hover,.menu li:hover>a {color: #fff;background:#F74047;}
.menu ul {visibility: hidden;opacity: 0;margin: 0;padding: 0;width: 150px;position: absolute;right: 0px;background: #456b8e;z-index: 99;}
.menu .sub-nav:after {content: "\f107";font-family: fontawesome;padding-right: 8px;}
.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: #fff;background: #456b8e;}
.menu ul li a:hover,.menu ul li:hover>a {background: #F74047;color: #fff;margin-right:16px}
.menu li:hover>ul {visibility: visible;opacity: 1;}
.menu ul ul {right: 149px;top: 0px;visibility: hidden;opacity: 0;}
.menu li>ul ul:hover {visibility: visible;opacity: 1;}
.responsive-menu {display: none;max-width: 74%;padding:14px;color: #fff;}
a.responsive-menu {color:#fff;}
@media screen and (max-width:600px) {
nav {margin: 0 15px;background: none;overflow:hidden}
.menu {display: none;}
.responsive-menu {display: block;}
.menu li {display: block;margin: 0px;}
.menu li a {background: #fff;color: #797979;}
.menu li a:hover,.menu li:hover>a {background: #e8102d;color: #fff;}
.menu ul {visibility: hidden;opacity: 0;top: 0;right: 25px;width: 100%;}
.menu li:hover>ul {visibility: visible;opacity: 1;position: relative;}
.menu ul ul {right: 50px;}
}
@media screen and (max-width:335px) {nav{width:76%}}
</style>

1. الان ضع هذة الاكواد مكان اكواد القائمة التى حذفتها وعدلها كما تريد

<!-- بداية القائمة المنسدلة (كن مهووس) -->
<div id='menu-wrapper'>
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'></i> القائمة</a>
<ul class='menu'>
<style>
a.a-homer {background: #d03f42 !important;text-align: center;font-size: 30px;}
</style>
<li><a class='a-homer' href='/' style='margin-right: 10px;padding: 10px 10px 19px 10px;margin-top: -6px;'><i class='fa fa-home'></i></a></li>
<li><a href='#'> بلوجر <i class='fa fa-hand-o-down'></i></a>
<ul id='sub-menu'>
<li><a href='/search/label/قوالب بلوجر'>
<i class='fa fa-hand-o-left'></i>
قوالب
</a></li>
<li><a href='/search/label/اضافات بلوجر'>
<i class='fa fa-hand-o-left'></i>
اضافات
</a></li>
</ul>
</li>
<li><a href='/search/label/اندرويد'>اندرويد</a></li>
<li><a href='#'>ويندوز <i class='fa fa-hand-o-down'></i></a>
<ul id='sub-menu'>
<li><a href='/search/lable/برامج'>برامج</a></li>
<li><a href='/search/lable/العاب'>العاب</a></li>
<li><a href='/search/lable/باتشات pes'>باتشات بيس</a></li>
</ul>
</li>
<li><a href='#'>دورات <i class='fa fa-hand-o-down'></i></a>
<ul id='sub-menu'>
<li><a href='/search/lable/دورة بلوجر'>بلوجر</a></li>
<li><a href='/search/lable/دورة تعلم واحتراف لغة البرمجة HTNL'>Html(1)</a></li>
<li><a href='/search/lable/احتراف لغة البرمجة HTML'>Html(2)</a></li>
<li><a href='/search/lable/تعلم واحتراف لغة البرمجة Css'>Css</a></li>
</ul>
</li>
<li><a href='#'>المزيد <i class='fa fa-hand-o-down'></i></a>
<ul id='sub-menu'>
<li><a href='/p/flat-color.html' title='للمصممين'>
<i class='fa fa-hand-o-left'></i>
الوان فلات
</a></li>
<li><a href='/p/photoshop-online.html' title='للمصمين'>
<i class='fa fa-hand-o-left'></i>
فوتوشوب اونلاين
</a></li>
<li><a href='/p/convertor.html' title='وشفرات ادسنس'>
<i class='fa fa-hand-o-left'></i>
محول الاكواد
</a></li>
<li><a href='/p/blog-page_48.html' title='بدون تقطيع'>
<i class='fa fa-hand-o-left'></i>
Bein Sport Live
</a></li>
<li><a href='/search/label/مسابقات' title='افضل الهدايا'>
<i class='fa fa-hand-o-left'></i>
مسابقات
</a></li>
</ul></li>
</ul>
</nav>
<div id='trigger-overlay'>
<a href='#'><i class='fa fa-search'></i></a></div>
</div>
<script src='https://cdn.rawgit.com/th3littleprof/elprof/master/search.js'>  </script>
<script src='https://cdn.rawgit.com/th3littleprof/elprof/master/search2.js'> </script>
<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 > 600 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
//]]>
</script>
<!-- نهاية القائمة المنسدلة (كن مهووس) -->

1. احفظ القالب