[حصريا] قائمة إحترافية جدا بشكل جديد

الكاتب بتاريخ عدد التعليقات : 2

مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد وحصري واحترافي على المدونة قائمة جديدة الشكل إحترافية من مدونة نقطة ابداع لصاحبها عدنان المحمود القائمة مستخدمة في قالب مدونتنا الاول يمكنك معاينتها من هنا
طريقة التركيب
نذهب الى لوحة التحكم ثم القالب ثم تحرير html
نبحث عن ]]></b:skin>
نضع الكود التالي قبله (فوقه)
#menutop {display: block;background: #3F87CD;}
      .menu {display: block;}
      .menu li {display: inline-block;position: relative;z-index: 100;}
      .menu li:first-child {margin-left: 0;}
      .menu li a {font-family: 'ge_thameenregular';font-weight: 600;text-decoration: none;padding: 16px 13px;display: block;color: #fff;transition: all 0.2s ease-in-out 0s;}
      .menu li a:hover{color: #fff;background: #3580C8;}
      .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: #5CA1E5;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: #FFFFFF;background: #5CA1E5;}
      .menu ul li a:hover,.menu ul li:hover>a {background: #3580C8;color: #fff;}
      .menu li:hover>ul {visibility: visible;opacity: 1;transform: translate(0,0);}
      .menu ul ul {left: 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: #3580C8;}
      @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;}
        #menutop {margin: 0;background: none;}
        .menu li {display: block;margin: 0;}
        .menu li a {background: #fff;color: #797979;}
        .menu li a:hover {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) {
      }
ثم نقوم بالبحث عن </head>
ونضع فوقه الكود التالي
<link href="http://cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css" rel="stylesheet"/>
الان نقوم بوضع هذا الكود في المكان الذي نريد ضهور القائمة فيه
<nav id='menutop'>
<ul class='menu'>
                    <li>
                      <a class='homer' href='#'>
                        <i class='fa fa-home'/>
                        الرئيسية
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/blog-page_99.html'>
                        <i class='fa fa-user'/>
                        سجل الزوار
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/2014/09/blog-post_94.html'>
                        <i class='fa fa-bullhorn'/>
                        التبادل الإعلاني
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/blog-page_12.html'>
                        <i class='fa fa-microphone'/>
                        البث المباشر
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/blog-page_47.html'>
                        <i class='fa fa-tags'/>
                        سياسة الخصوصية
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/24.html'>
                        <i class='fa fa-envelope'/>
                        للتواصل
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/blog-page_52.html'>
                        <i class='fa fa-sitemap'/>
                        الفهرس
                      </a>
                    </li>
                    <li>
                      <a href='http://th3geekweb3.blogspot.com/p/class-post-body-entry-content-id-post.html'>
                        <i class='fa fa-exclamation-triangle'/>
                        الوان فلات
                      </a>
                    </li>
                    <li class='sorting-01 facebook'>
                      <a href='http://www.facebook.com/th3geekweb3' target='_blank'>
                        <i class='fa fa-facebook fa-lg'/>
                        <span class='inv'/>
                      </a>
                    </li>
                    <li class='sorting-02 twitter'>
                      <a href='twitter.com/almahmod2013'>
                        <i class='fa fa-twitter fa-lg'/>
                        <span class='inv'/>
                      </a>
                    </li>
                    <li class='sorting-03 googleplus'>
                      <a href='https://plus.google.com/u/0/117857319584578115964/posts' traget='_blank'>
                        <i class='fa fa-google-plus fa-lg'/>
                        <span class='inv'/>
                      </a>
                    </li>
                    <li class='sorting-04 youtube'>
                      <a href='https://www.youtube.com/user/aboyazanllm3lomat' traget='_blank'>
                        <i class='fa fa-youtube fa-lg'/>
                        <span class='inv'/>
                      </a>
                    </li>
                  </ul>
</nav>

ومن يريد اي مساعدة لا يتردد بوضعها في تعليق

2 تعليقات على موضوع " [حصريا] قائمة إحترافية جدا بشكل جديد "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء