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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف ♕ Professeur في الثلاثاء نوفمبر 06, 2018 10:28 am


السلام عليكم ورحمة الله وبركاته





اهلا وسهلا من جديد 

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

صورة له





https://i.servimg.com/u/f58/19/13/48/56/oi_10.png


طريقة الوضع ؟

يمكنك وضعه فى اى مكان تريده بتومبلايت او عبر 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="navigation">      <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>

والقادم اجل باذن الله



avatar
♕ Professeur
مؤسس المبدعين
  •  



  • الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف Nano في الثلاثاء نوفمبر 06, 2018 8:32 pm


    شكرا لك علي الموضوع القيم 


    Nano
    عضو جديد


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف DryToHell في الجمعة نوفمبر 09, 2018 10:41 am


    موضوع مميز جدا شكرا لك

    avatar
    DryToHell
    عضو متالق


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف TheStar في الجمعة نوفمبر 09, 2018 2:22 pm


    شكرا علي الموضوع القيم والمميز

    avatar
    TheStar
    عضو متالق


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف تامر معاز في الخميس ديسمبر 13, 2018 7:34 pm


    مشكور علي الموضوع القيم والمميز

    avatar
    تامر معاز
    عضو متالق


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف same7 في الجمعة ديسمبر 14, 2018 8:37 am


    مشكور علي الموضوع القيم والمميز

    avatar
    same7
    عضو متالق


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف SLGray في الجمعة ديسمبر 14, 2018 3:41 pm


    سلمت يداك علي الموضوع المميز

    avatar
    SLGray
    نجم المنتدي


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف zoolraqey في الجمعة ديسمبر 14, 2018 4:37 pm


    جزاك الله خير

    avatar
    zoolraqey
    عضو نشيط


    http://ahs-g.yoo7.com

    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف TheStar في الأربعاء ديسمبر 26, 2018 9:20 am


    شكرا لك علي الموضوع القيم 

    avatar
    TheStar
    عضو متالق


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف Avast في الإثنين ديسمبر 31, 2018 6:10 pm


    مشكور علي الموضوع القيم والمميز

    avatar
    Avast
    نجم المنتدي


    الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

    مُساهمة من طرف The Godfather في الإثنين يناير 07, 2019 8:55 pm


    بصراحه انت تمتلك ذوق راقي في جـلب ماهو مميّز وجميل

    avatar
    The Godfather
    مؤسس المبدعين
  •  



  • الرجوع الى أعلى الصفحة اذهب الى الأسفل

    استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

    سجل دخولك لتستطيع الرد بالموضوع

    لابد تكون لديك عضوية لتستطيع الرد سجل الان

    سجل معنا الان

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


    تسجيل عضوية جديدة

    سجل دخولك

    لديك عضوية هنا ؟ سجل دخولك من هنا .


    سجل دخولك

    صلاحيات هذا المنتدى:
    لاتستطيع الرد على المواضيع في هذا المنتدى