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

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

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

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

  1. احتفظ بنسخة احتياطية من القالب لتجنب حدوث ايه مشاكل
  2. توجه الى تحرير html 
  3. تاكد اولا من حذف ستايل واكواد القائمة الموجودة عندك
  4. ابحث عن </head> واضف الاكواد التالية قبله
<style>
/* CSS Main Menu */
#menu-wrapper1{background:#29567D;height:50px;width:99%;position:relative;border:4px solid #fff;border-bottom:4px solid #F74047;}
#menu{background:#29567D;color:#fff;height:50px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:50px}
#menu li{float:right;display:inline;position:relative;font-size:12px;font-weight:400;text-transform:uppercase;}
#menu li a{color:#fff;}
#menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}
#menu li:hover &gt; a{background:#29567D;color:#fff;}
#menu li a:hover{color:#fff;}
#menu li:last-child a{border-left:none;}
#menu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu label{font-size:30px;font-weight:400;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;right:35px}
#menu ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;min-width:166px;background:#29567D;position:absolute;z-index:99;color:#fff;top:50px;-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transform:scale(0.8);transform:scale(0.8);transition:all 0.3s ease-in-out;}
#menu li:hover &gt; ul.menus{visibility:visible;opacity:1;-moz-transform:scale(1.0);-o-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0);}
#menu a.ai,#menu a.trigger2{padding:0 14px 0 27px;transition:all 0.3s linear;}
#menu &gt; li:hover &gt; a.ai,#menu a.ai:hover{background:#29567D;color:#fff;}
#menu li &gt; a.ai::after {content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;left:10px;}
#menu li:hover &gt; a.ai{box-shadow:inset 0 4px 0 0 #ea5a59;}
#menu ul.menus a{background:#29567D;color:#fff;border-bottom:1px solid #F74047;
border-top:1px solid #333c3f;transition:all 0.2s linear;}
#menu ul.menus a:hover{background:#F74047;color:#fff;transition:all .1s linear;}
#menu ul.menus li{display:block;width:100%;font-size:13px;font-weight:400;text-transform:none;}
#menu ul.menus li a:before {visibility:hidden;opacity:0;content:&quot;\f060&quot;;font-family:FontAwesome;font-size:12px;font-style:normal;font-weight:normal;top:0;right:35px;margin-left:10px;position:absolute;padding:0;color:#F74047;transition:all 0.2s ease-in-out;}
#menu ul.menus li a:hover:before {right:10px;visibility:visible;opacity:1;}
#menu ul.menus li:hover{width:100%;}
#menu ul.menus li:last-child {border-bottom:none;}
#menu ul.menus li:first-child a{border-top:none;}
#menu ul.menus li:last-child a{border-bottom:none;}
#menu ul.menus &gt; li:hover &gt; a {background:#F74047;color:#fff;padding-right:25px;transition:all 0.1s linear;}
#menu .homers a{background:#F74047;color:#fff;margin-right:20px;padding:3px 10px;margin-top: -6px;}
#menu .homers a:hover{background:#ca1616;color:#fff;}
#menu .homers .fa.fa-home{text-align:center;color:#fff;line-height:50px;}
#menu .arlina a{color:#fff;line-height:47px;}
#menu .arlina a:hover{color:#fff;}
#menu .arlina .fa.fa-download{text-align:center;background:#29567D;color:#fff;line-height: 15px;padding:8px 6px;border-radius:3px;transition:all 0.3s ease-in-out;}
#menu .arlina .fa.fa-download:hover{background:#fff;color:#F74047;}
/* CSS Fixed Search Button */
.lyco-search {position:relative;padding:0;height:0;margin:0 auto;}
#menu ul li.searchbutton {background:#F74047;margin:0;padding:2px 17px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:left;}
#menu ul li.searchbutton.active {background:#F74047;color:#fff;}
#menu ul li.searchbutton:after {content:&quot;\f002&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;}
#menu ul li.searchbutton.active:after {color:#fff;}
.search-form {display:none;position:fixed;bottom:0;background:#fff;
padding:5px 0;width:100%;z-index:91;margin:0 auto;}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;font-family:El Messiri}
.searchbar:focus {color:#666;}
.searchsubmit {background:#29567D;border:none;outline:none;cursor:pointer;font-family:El Messiri;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;line-height:45px;border-radius:2px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #29567D;}
.searchsubmit:active {background:#F74047;color:#fff;box-shadow:none;border:none;outline:none;}
@media screen and (max-width:960px) {
#menu{position:relative;background:#29567D;color:#fff;}
#menu ul{background:#29567D;position:absolute;top:100%;left:0;right:0;z-index:5;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;}
#menu li{display:block;width:100%;text-align:right;}
#menu a{border:none;}
#menu li a{color:#fff;}
#menu li a:hover{background:#F74047;color:#fff}
#menu li:hover{background:#F74047;color:#fff;}
#menu li:hover &gt; a.ai,#menu a.ai:hover{background:#F74047;color:#fff;}
#menu li:hover &gt; a,#menu li a:hover{background:#F74047;color:#fff;box-shadow:none;transition: .3s linear;}
#menu li:hover &gt; ul.menus{display:block;}
#menu ul.menus a{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus a:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus li:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li a{background:#29567D;color:#fff;border-bottom:none;}
#menu ul.menus li a:hover{background:#F74047;color:#fff;border-right:none;}
#menu ul.menus li a:hover:before {color:#fff;}
#menu input,#menu label{display:inline-block;position:absolute;left:0;top:0;}
#menu input:after,#menu label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;
display:inline-block;position:absolute;left:15px;top:25%;line-height:30px;}
#menu input{z-index:4}
#menu input:checked + label{color:#fff;font-weight:700}
#menu input:checked ~ ul{display:block}
#menu .homers a{background:transparent;color:#fff;margin-right:0;}
#menu .homers a:hover{background:#F74047;color:#fff;}
      #menu ul li.searchbutton {float:none;width:auto;text-align:right;cursor:pointer;}}
</style>
  1. الان ضع هذة الاكواد مكان اكواد القائمة التى حذفتها وعدلها كما تريد
<!-- بداية القائمة المنسدلة (كن مهووس) -->
<div class='lyco-search'>
</div>
  <div class='search-form'>
<form action='/search' class='searchform' method='get'>
  <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='ابحث هنا'/>
  <input class='searchsubmit' type='submit' value='بحث'/>
</form>
</div>
<div class='clear'/>  
<div id='menu-wrapper1' style='margin-top:25px'>
<div class='content-wrapper'>
            <nav id='menu'>
<input type='checkbox'/>
<label/>
<ul>
  <li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
<li><a href=''>قائمه</a></li>
<li><a class='ai' href='#'>قائمة منسدلة</a>
<ul class='menus'>
<li><a href='#'>قسم a</a></li>
<li><a href='#'>قسم b</a></li>
<li><a href='#'>قسم c</a></li>
</ul>
</li>
<li><a href=''>أزرار المرفقة</a></li>
<li><a class='ai' href='#'>قائمة منسدلة</a>
<ul class='menus'>
<li><a href='#'>قسم 1</a></li>
<li><a href='#'>قسم 2</a></li>
<li><a href='#'>قسم 3</a></li>
</ul>
</li>
<li><a href=''>صفحة 404</a></li>
<li class='searchbutton'/>
</ul>
</nav>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});
//]]>
</script>
<!-- نهاية القائمة المنسدلة (كن مهووس) -->
  1. احفظ القالب
اذا حدثت مشكلة او كان هناك استفسار او طلب فباب التعليقات مفتوح وصفحة اطلب اضافتك
avatar

ممكن لاضافة التي تبدا فيها الاغنية ف مدونتك

delete 1‏/9‏/2016 6:08 م

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


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





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

    Milad Shenouda

    Front-End Developer

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

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

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

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

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

    كن مهووس

    2018

    تكويد وتطوير