لونك المفضل
الألوان
chatالمواضيع الأخيرة
كلمات دليلية:

نافبار بشكل جديد وله روابط اضافية

Mr.Abdelrahman
Mr.Abdelrahman
الإدارة العليا
 نُشر في 2018-09-17

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

 نافبار بشكل جديد وله روابط اضافية Oi_10

طريقة الوضع ؟
يمكنك وضعه فى اى مكان تريده بتومبلايت او عبر HTML او غيرها من الاماكن التى تريد وضعها به
ولكن الطريقة المفضلة هى عبر التومبلايت
ادخل الى قالب:overall_header
ثم ابحث عن الرمز التالى وضع اسفله الكود

الكود:

<a id="top" name="top" accesskey="t"></a>


الكود:

 
<style>
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
 
/*وهبة الساحر*/
  header {
      background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
      border-bottom: 1px solid rgba(0,0,0,.1);
      box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
      display: block;
      position: fixed;
      width: 100%;
      z-index: 1000;
  }
 
  header > nav > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      list-style: none;
      margin: 0;
      padding: 0;
  }
 
      header > nav > ul > li {
        flex: 0 1 auto;
        margin: 0;
        padding: 0;
        position: relative;
        transition: all linear 0.1s; 
      }
     
        header > nav > ul > li:hover {
            background: rgba(58,162,173,1);
        }
       
        header > nav > ul > li a + div {
            background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);;
            border-radius: 0 0 2px 2px;
            box-shadow: 0 3px 1px rgba(0,0,0,.05);
            display: none;
            font-size: 1rem;
            position: absolute;
            width: 195px;
        }
       
            header > nav > ul > li:hover a + div {
              display: block;
            }
           
            header > nav > ul > li a + div > ul {
              list-style-type: none; 
            }
           
              header > nav > ul > li a + div > ul > li {
                  margin: 0;
                  padding: 0;
              }
             
                  header > nav > ul > li a + div > ul > li > a {
                    color: rgba(255,255,255,.9);
                    display: block; 
                    font-size: .75rem;
                    letter-spacing: 1.5px;
                    padding: .25rem 1.5rem;
                    text-decoration: none;
                    text-transform: uppercase;
                  }
                 
                    header > nav > ul > li a + div > ul > li:hover > a {
                        background-color: rgba(0,0,0,.15); 
                    }
 
        header > nav > ul > li > a {
            align-items: flex-start;
            color: #fff;
            display: flex;
            font-size: 1.55rem;
            font-weight: 200;
            letter-spacing: 1px;
            max-width: 130px;
            padding: 1rem 1.5rem;
            text-decoration: none;
            text-shadow: 0 1px 1px rgba(0,0,0,.1);
            transition: all linear 0.1s;
        }
       
            header > nav > ul > li > a > div > span {
              color: rgba(255,255,255,.75);
              display: block;
              font-family: Georgia, "Times New Roman", Times, serif;
              font-size: .7rem; 
              font-style: italic;
              line-height: 1rem;
              max-width: 260px;
            }
 
@media (min-width: 990px) {
  header > nav > ul > li > a {
    max-width: 500px;
    font-size: 1.7rem;
  line-height: 2rem;
  }
 
  header > nav > ul > li > a > div > span {
    margin: 4px 0 0; 
  }
}
</style>
 
<header>
  <nav role="n.....تمنع روابط التحميل الغير قانوني......gation">
      <ul>
        <li>
            <a href="/">
              <div>
                  الرئيسية
                  <span>لا يوجد مكان مثل ذلك</span>
              </div>
            </a>
        </li>
        <li>
            <a href="#">
              <div>
                  مدونة
                  <span>أفكاري الصخور</span>
              </div>
            </a><div>
              <ul>
                  <li><a href="#">أنا</a></li>
                  <li><a href="#">الألعاب</a></li>
                  <li><a href="#">رياضة</a></li>
                  <li><a href="#">تم تصميم الموقع</a></li>
                  <li><a href="#">تطوير الشبكة</a></li>
              </ul>
            </div>
        </li>
        <li>
            <a href="/contact">
              <div>
                  اتصل
                  <span>قطرة لي خط</span>
              </div>
            </a>
        </li>
        <li>
            <a href="/forum">
              <div>
منتدى
                  <span>الدردشة مع الآخرين</span>
              </div>
            </a>
        </li>
      </ul>
  </nav>
</header>
التوقيع

رد: نافبار بشكل جديد وله روابط اضافية

منصورة
منصورة
مدير المنتدى
 نُشر في في 2018-09-17, 17:27
ما شاء الله
يسلم ذووقك اخى
ودقتك فى اختيار الاكواد كتير مهمه
وشروحات مبسطه الله يعطيك العافيه
التوقيع


 نافبار بشكل جديد وله روابط اضافية F8oq5Vt
اللهم بلغنا رمضان لافاقدين ولا مفقودين
اللهم اجعل صيامي فيه صيام الصائمين
وقيامي فيه قيام القائمين, ونبهني فيه عن نومة الغافلين

رد: نافبار بشكل جديد وله روابط اضافية

مصطفى ستيتان
مصطفى ستيتان
رئاسة فريق الإشراف
 نُشر في في 2018-10-03, 13:55
ألف شكر لكم على المجهود الطيب, 
وجزاكم الله كل خير
التوقيع


سبحان الله والحمدلله ولا إله إلا الله 

إربح المال من منتداك المجاني ( احلى منتدى ) اضغط هنااا


 نافبار بشكل جديد وله روابط اضافية Do

 نافبار بشكل جديد وله روابط اضافية Do

رد: نافبار بشكل جديد وله روابط اضافية

حميد العامري
حميد العامري
المشرف العام
 نُشر في في 2018-10-05, 09:08
مجهود رائع
بارك الله بك
التوقيع