قائمة عمودية احترافية بتقنية HTML5 - CSS3 2023

إضافات بلوجر

 كيفية إنشاء قائمة عمودية أنيقة " قائمة التنقل العمودي " بتقنية HTML5 و CSS3 . 

سوف أشرح لك كيفية إنشاء قائمة منزلقة و متحركة.

طريقة التركيب:

- الخطوة الأولى

في لوحة التحكم.

الآن الذهاب إلى قالب> تحرير HTML.

إبحث عن]]> </ b: skin>

فوقه قم قم بلصق الكود الاول "CSS" و إضغط حفظ.

* {الهامش: 0 ؛ حشوة: 0 ؛ المخطط التفصيلي: لا شيء ؛ -حجم صندوق مجموعة الويب: مربع الحدود ؛ -حجم مربع-موز: مربع الحدود ؛ حجم الصندوق: مربع الحدود ؛ } body {background: #eee؛ اللون: # 444 ؛ -webkit-font-smoothing: antialiased؛ عائلة الخطوط: 'Helvetica Neue'، sans-serif؛ حجم الخط: 20 بكسل ؛ وزن الخط: 400 ؛ الارتفاع: تلقائي! مهم ؛ الارتفاع: 100٪؛ الحد الأدنى للارتفاع: 100٪ ؛ تقديم النص: تحسين الأهلية ؛ } div.wrapper {margin: 20px auto؛ العرض: 350 بكسل ؛ } ع {font-family: georgia؛ حجم الخط: 1rem ؛ ارتفاع الخط: 25 بكسل ؛ الهامش: 24 بكسل 0 ؛ محاذاة النص: مركز ؛ } nav.vertical {border-radius: 4px؛ مربع الظل: 0 0 10px rgba (0،0،0، .15) ؛ إخفاء الفائض؛ محاذاة النص: مركز ؛ } nav.vertical> ul {list-style-type: none؛ } nav.vertical> ul> li {display: block؛ } nav. عمودي> ul> li> a {background-color: rgb (157، 34، 60)؛ صورة الخلفية: -webkit-linear-gradient (135deg ، rgb (114 ، 51 ، 98) ، rgb (157 ، 34 ، 60)) ؛ صورة الخلفية: -moz-linear-gradient (135deg ، rgb (114 ، 51 ، 98) ، rgb (157 ، 34 ، 60)) ؛ صورة الخلفية: -o-linear-gradient (135deg، rgb (114، 51، 98)، rgb (157، 34، 60)) ؛ صورة الخلفية: التدرج الخطي (135 درجة ، RGB (114 ، 51 ، 98) ، RGB (157 ، 34 ، 60)) ؛ الحد السفلي: 1 بكسل صلبة rgba (255،255،255 ، .1) ؛ مربع الظل: أقحم 0 1px 1px rgba (0،0،0، .1)، 0 1px 1px rgba (0،0،0، .1) ؛ اللون: rgb (255،255،255) ؛ العرض محجوب؛ حجم الخط: .85rem ؛ وزن الخط: 500 ؛ الارتفاع: 50 بكسل ؛ تباعد الحروف: .5rem ؛ ارتفاع الخط: 50 بكسل ؛ ظل النص: 0 1px 1px rgba (0،0،0، .1) ؛ تحويل النص: الأحرف الكبيرة ؛ الانتقال: سهولة جميع. زخرفة النص: لا شيء ؛ } nav.vertical> ul> li> a: hover {background-color: rgb (114، 51، 98)؛ صورة الخلفية: -webkit-linear-gradient (150deg، rgb (114، 51، 98)، rgb (114، 51، 98)) ؛ صورة الخلفية: -moz-linear-gradient (150deg، rgb (114، 51، 98)، rgb (114، 51، 98)) ؛ صورة الخلفية: -o-linear-gradient (150deg، rgb (114، 51، 98)، rgb (114، 51، 98)) ؛ صورة الخلفية: التدرج الخطي (150 درجة ، RGB (114 ، 51 ، 98) ، RGB (114 ، 51 ، 98)) ؛ المؤشر: المؤشر. } nav.vertical> ul> li> div {background-color: rgb (255،255،255)؛ } nav.vertical> ul> li> div> ul {list-style-type: none؛ } nav.vertical> ul> li> div> ul> li> a {background-color: rgb (255،255،255)؛ الحد السفلي: 1 بكسل صلبة rgba (0،0،0 ، .05) ؛ اللون: # 333331 ؛ العرض محجوب؛ حجم الخط: 1.1rem ؛ الحشو: 10 بكسل 0 ؛ زخرفة النص: لا شيء ؛ الانتقال: كل 0.15 ثانية خطية ؛ } nav.vertical> ul> li> div> ul> li: hover> a {background-color: lightBlue؛ اللون: rgb (255،255،255) ؛ الحشو: 10 بكسل 0 10 بكسل 50 بكسل ؛ } الانتقال: كل 0.15 ثانية خطية ؛ } nav.vertical> ul> li> div> ul> li: hover> a {background-color: lightBlue؛ اللون: rgb (255،255،255) ؛ الحشو: 10 بكسل 0 10 بكسل 50 بكسل ؛ } الانتقال: كل 0.15 ثانية خطية ؛ } nav.vertical> ul> li> div> ul> li: hover> a {background-color: lightBlue؛ اللون: rgb (255،255،255) ؛ الحشو: 10 بكسل 0 10 بكسل 50 بكسل ؛ }

- الخطوة 2

إذهب إلى لوحة بلوجر.

اختر تخطيط.

إضغط علي إضافة أداة.

إختر HTML / Javascript.

أضف الكود الثاني "HTML" وإضغط حفظ

<div class = "wrapper">
  <nav class = "vertical">
    <ul>
      <li>
        <a href=" # "> الرئيسية </a>
        <div>
          <ul>
            <li> <a href = " # "> القائمة 1 </a> </li>
            <li> <a href=" # "> القائمة 2 </a> </li>
            <li> <a href=" # "> القائمة 3 </a> </li>
            <li> <a href=" # "> قائمة 4 </a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href = " #"> بلوجر </a>
        <div>
          <ul>
             <li> <a href=" # "> القائمة 1 </a> </li>
            <li> <a href=" # "> القائمة 2 </ a > </li>
            <li> <a href=" # "> قائمة 3 </a> </li>
          </ul>
        </div>
      </li>
      <li>
        <a href=" # "> التسميات </a>
        <div>
          <ul>
             <li><a href=" # "> القائمة 1 </a> </li>
            <li> <a href=" # ">قائمة 2 </a> </li>
            <li> <a href=" # "> قائمة 3 </a> </li>
          </ul>
        </div>
      </li>
    </ul>
  </ nav >  <p> <em> قائمة عمودية احترافية <a href=" www.bloggereducation.co.vu "target="_blank"> عبد الرزاق </a>. </em> </p>

</div> 

 الان غير ما باللون الازرق بما تريد
أما اللون البرتقالي بروابطك

عمليات البحث ذات الصلة على google:

اضافات بلوجر 2023 اهم اضافات بلوجر افضل اضافات بلوجر اكواد اضافات بلوجر إضافات بلوجر javascript اضافات بلوجر مميزة اضافات بلوجر جافا سكريبت إضافات بلوجر html اضافات بلوجر احترافية