أخرى

CSS3 Vertical Navigation with Teaser

css-vertical-menu-bar-31 CSS3 Vertical Navigation with Teaser
السلام عليكم و رحمة الله تعالى و بركاته
ادا كنت تبحث عن ما هو CSS3 Vertical Navigation with Teaser فانت في المكان المناسب

CSS3: يشرح هذا المقال كيفية انشاء قوائم الملاحة دون jquery او javascript. نعم, سنقوم ببناء القوائم الراسية بـ CSS فقط. قائمة التنقل على شبكة الانترنت دورا هاما فى موقعها الالكترونى الاستخدام تجربة المستخدم. موقع دون للتنقل خلال القائمة مثل المحتوى الا غير مجدية. سهولة التنقل فى جميع انحاء موقع على شبكة الانترنت شئ كل الاحتياجات. اذا كنت تبحث عن CSS قائمة الراسى فقد اتيت الى المكان الصحيح.
على شبكة الانترنت, ستجد العديد من الطرز من قد خلق ويشتمل شريط القائمة الموجود باستخدام jquery/ سكريبت. انه طيب لانشاء قوائم الطعام باستخدام jquery, ولكن ماذا لو استطعنا انشاء قوائم الملاحة خالصة. CSS ونحن الان بسيط teaser CSS شريط القوائم مع .للفئة على القائمة تحلق نبين بعض البيانات ذات الصلة.

1.خطوات لانشاء قائمة راسية مع CSS3

  1. Add HTML markup UL, LI
  2. CSS: span data display on hover.
كود HTML


<ul class=”menu-navigation”>
  <li><a href=”#”># jQuery
  <span>Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
 </span></a>
  </li>
  <li><a href=”#”># Angular JS
  <span>Persona que se dedica a la impren desconocido usó una galería de textos y los mezcló de tal manera que. </span>
  </a>
  </li>
  <li><a href=”#”># MS SQL
  <span>Documentos quedando esencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li><a href=”#”># JavaScript
  <span>Creaciónesencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  </a>
  </li>
  <li><a href=”#”># Asp.net MVC
  <span>Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, </span>
  </a>
  </li>

</ul>

كود CSS3

ul.menu-navigation {
  font-size: 1.2em;
  float: left;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #e25454;
  border-bottom: 1px solid #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 205px;
  padding: 10px 10px 10px 35px;
  border-top: 1px solid #BF4E4E;
  border-bottom: 1px solid #BF4E4E;
}

ul.menu-navigation li span {
  display: none;
}

ul.menu-navigation li a:hover {
  background-color: #BF4E4E;
  border-top: 1px solid #BF4E4E;
}

ul.menu-navigation li a:hover span {
  display: block;
  font-size: 0.8em;
  padding: 10px 0;
}

قلعة الشروح
قلعة الشروح

مدونة تقنية يوجد مقرها في المغرب, و قد تم تأسيسها في سنة 2010 من طرف عبدلله اصبارن و من أهم أهدفها المساهمة في إثراء و تعزيز المحتوى العربي . قلعة الشروح تهتم بكل ما له علاقة بالحواسيب ونصائح الويب مع التركيز على تقديم حلول لمشاكل المستخدمين

ذات صلة

إرسال التعليق

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