لیست و نمایش

لیست و نمایش (display , list) در css

فهرست (list) یکی از مهمترین قسمت های طراحی سایت هستند، طریقه ساخت فهرست ها را قبلا مشاهده نمودید اما در اینجا می خواهیم زیر منو ها را یاد بگیریم. شما برای داشتن یک فهرست زیبا در قسمت بالای سایت خود نیاز به یادگیری منوی کشویی یا زیر منو دارید.

مـــهم ابتدا شما باید بدانید که می توان با صفت float یک فهرست افقی یا سطری را ایجاد کرد.

همان طور که قبلا گفته شد شما می توانید عناصر را داخل یکدیگر قرار دهید، پس شما در li های یک فهرست می توانید یک فهرست دیگر ایجاد نمایید. با قرار دادن فهرست در li ها شما یک زیر منو را در اختیار دارید و می توانید به آن سبک دهید.

مـــهم برای سبک دادن به زیر منو بایدشما با صفت display نیز آشنایی داشته باشید. با صفت display شما می توانید عناصر را block یا inline یا inline-block یا flex و… قرار دهید. برای آشنایی کامل با موارد ذکر شده به اینجا مراجعه نمایید.

در زیر یک منوی افقی دارای یک زیر منو را مشاهده می کنید:

  • Home
  • Products
  • About


html :
<ul><li>Home</li>
<li>Products
<ul><li>Car</li><li>Bus</li></ul>
</li>
<li>About</li></ul>
style:
ul {list-style-type: none;
width: 30%;}
ul >li{float:right;
padding: 2% 6%;
background-color:black;}
ul li ul{display:none;}
li:hover ul{display:block;}


مـــهم با display:none شما میتوانید یک عنصر را نا مرعی کرده و دوباره آن را به نمایش درآورید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *