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

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
اضافة قائمة رئيسية متجاوبة وبتاثيرات رائعة
كتب بواسطة
عدد التعليقات
5 التعليقات

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

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

  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. احفظ القالب
اذا حدثت مشكلة او كان هناك استفسار او طلب فباب التعليقات مفتوح وصفحة اطلب اضافتك
avatar

السلام عليكم هل يمكن فصل صندوق البحث وحده
2- هل يمكن ربط صندوق البحث بمحرك البحث المخصص قوقل

delete 20‏/8‏/2016 9:16 م
avatar

يمكنك فصل صندوق البحث
ولكن لا يمكنك ربط صندوق البحث بمحرك البحث قوقل

delete 21‏/8‏/2016 3:11 م
avatar

اريد التكلم معك في الفيسبوك

delete 29‏/8‏/2016 11:57 م
avatar

تفضل اخى يسعدنا تواصلك معى
https://www.facebook.com/Mido.Oops

delete 30‏/8‏/2016 12:09 ص
avatar

ممكن طريقة حدف الستايل القائمة

delete 30‏/8‏/2016 2:05 م

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير