ساخت انواع منو در CSS

14 اردیبهشت 1398
درسنامه درس 24 از سری صفر تا صد CSS
CSS-navigation-bar

Navigation Bar چیست؟

Navigation Bar به معنی «نوار جهت یابی» است و معمولا همان نواری است که در بالای صفحات وب سایت ها قرار می گیرد و به کاربر کمک می کند که راه خود را در سایت پیدا کند. در روکسو این نوار به شکل زیر است:

navigation bar در سایت روکسو پلاس
navigation bar در سایت روکسو پلاس

در این مقاله می خواهیم با نحوه ی ساخت آن ها آشنا شویم.

هر navigation bar نیاز به کدهای پایه ای HTML دارد بنابراین در این مثال از شایع ترین روش ساخت navigation bar، یعنی استفاده از لیست های HTML ای استفاده می کنیم. در واقع به زبان ساده می توان گفت که navigation bar ها لیستی از لینک ها هستند که به صورت خاصی چیده شده اند.

<!DOCTYPE html>
<html>
<body dir='rtl'>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ی ما</a></li>
</ul>

<p>هشدار: ما در این مثال از علامت هشتگ استفاده می کنیم اما در حالت واقعی باید آدرس اینترنتی مناسب را در آن وارد کنید.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

خب تا اینجا اساس کار را پایه ریزی کردیم. حالا باید bullet ها را حذف کنیم و مقادیر margin و padding پیش فرض را نیز حذف کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body dir='rtl'>

<p>حالا باید bullet ها را حذف کنیم و مقادیر margin و padding پیش فرض را نیز حذف کنیم.</p>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ی ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

با دستور ;list-style-type: none در مقالات قبلی HTML آشنا شده ایم؛ با این دستور می توان استایل لیست ها (bullet یا نشانگانشان) را حذف کرد. مقدار margin: 0 و padding: 0 نیز برای حذف margin و padding پیش فرض است.

چه بخواهید منوی navigation شما افقی باشد و چه عمودی، باید تمام این مراحل را طی کنید اما از این قسمت به بعد برای منوی های افقی و عمودی متفاوت عمل خواهیم کرد.

منوهای عمودی

برای منوهای عمودی میتوانیم عناصر <a> را در لیست بالا استایل دهی کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<p>یک رنگ پس زمینه به لینک ها اضافه کرده ایم.</p>
<p>توجه کنید که تمام فضای لیست قابل کلیک است نه فقط لینک های موجود در آن</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال از display: block استفاده کرده ایم تا تمام فضای لیست قابل کلیک باشد (نه فقط متن لینک ها). همچنین حالا می توانیم طول و عرض تعیین کنیم اما از آنجا که عناصر block به صورت پیش فرض تمام صفحه را می گیرند باید از width: 60px استفاده کنیم (یعنی مقدار مشخصی به آن بدهیم تا تمام صفحه را اشغال نکند.

همچنین می توانیم عرض <ul> را تعیین کرده و عرض <a> را حذف کنیم چرا که خودشان فضای قابل دسترسی را اشغال خواهند کرد. این روش تفاوتی با روش بالا (مثال قبل) ندارد:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
  background-color: #dddddd;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<p>یک رنگ پس زمینه به لینک ها اضافه کرده ایم.</p>
<p>توجه کنید که تمام فضای لیست قابل کلیک است نه فقط لینک های موجود در آن</p>

</body>
</html>

مشاهده ی خروجی در JSBin

تا اینجای کار از نظر ظاهری منوی خوبی نداشتیم و تنها پایه ریزی اش کرده ایم. حالا نوبت استایل دهی است! رنگ پس زمینه را خاکستری روشن نگه می داریم و می گوییم اگر کاربر موس خود را روی لینکی آورد، رنگ آن خاکستری تیره شود:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body dir='rtl'>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا باید از یک کلاس به نام active استفاده کنیم تا به کاربر بگوییم در کدام صفحه قرار دارد:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body dir='rtl'>

<h2>Vertical Navigation Bar</h2>
<p>در این مثال یک کلاس Active ساخته که رنگ پس زمینه اش سبز و رنگ متن اش سفید باشد. این کلاس را فعلا به لینک «خانه» اضافه می کنیم.</p>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا می توانیم برای وسط قرار دادن متن منوی خود، از text-align:center استفاده کنیم که به <li> ها یا <a> ها اضافه می شود. همچنین یک border به <ul> ها اضافه می کنیم. اگر می خواهید این حاشیه ها داخل منو هم باشند، باید border-bottom را به عناصر <li> اضافه کنیم (به غیر از مورد آخر، چرا که خودش حاشیه ی پایین دارد):

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body dir='rtl'>

<h2>Vertical Navigation Bar</h2>
<p>در این مثال متن را وسط چین کرده و به کل منو حاشیه اضافه می کنیم</p>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: توجه داشته باشید که تمام این موارد به غیر از موارد پایه ای کاملا به سلیقه ی شما بستگی دارد. ما بر اساس سلیقه ی خود منو را به شکل بالا در آورده ایم اما شما می توانید آن را کاملا متفاوت استایل دهی کنید (در آخر این مقاله مثالی برایتان آماده کرده ایم).

اگر بخواهیم این منو را تبدیل به یک منو عمودی ثابت کنیم، می توانیم به این شکل عمل کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<div style="margin-right:25%;padding:1px 16px;height:1000px;">
  <h2>منوی عمودی ثابت</h2>
  <h3>با اسکرول کردن صفحه منو از جایش تکان نمی خورد</h3>
  <p>توجه کنید که این div مقدار margin از سمت راستش 25 درصد است. چرا؟ به دلیل اینکه خود منوی عمودی ما 25 درصد عرض دارد بنابراین اگر این margin را حذف کنید لایه ها روی هم می روند.</p>
  
  <p>همچنین به sidenav مقدار overflow:auto داده ایم. با این کار اگر تعداد لینک های این منو بسیار زیاد باشد (مثلا 50 لینک) دیگر از صفحه خارج نمی شوند بلکه اسکرول می گیرند.
  </p>
  
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این مثال ابتدایی است و ممکن است در گوشی های موبایل به طور صحیح نمایش داده نشود.

منوهای افقی

برای ایجاد منوهای افقی دو راه وجود دارد: استفاده از inline و یا استفاده از float. ابتدا از روش inline استفاده می کنیم:

در این روش باید عناصر <li> را به صورت inline قرار دهیم (البته کدهای پایه را که بالاتر تعریف کردیم دست نمی زنیم):

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

عناصر <li> به صورت پیش فرض block هستند، دلیل استفاده از display: inline نیز همین است؛ تا کاری کنیم که کنار هم قرار بگیرند نه زیر هم.

روش دیگر کنار هم قرار دادن این لینک ها استفاده از float برای عناصر <li> است:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<p><b>هشدار:</b>اگر مقدار !DOCTYPE را تعیین نکرده باشید، استفاده از float می تواند باعث ایجاد رفتار های ناخواسته از سمت مرورگر شود.</p>
<p>ما از خاکستری روشن برای پس زمینه ی لینک ها استفاده کرده ایم تا فضای قابل کلیک لینک را مشاهده کنید</p>
<p><b>هشدار:</b>ما از overflow:hidden روی عناصر ul استفاده کرده ایم تا به li ها اجازه ندهیم که از لیست خارج شوند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

دلیل اضافه کردن padding: 8px این است که لینک های منوی ما به هم نچسبند و کمی از هم فاصله بگیرند (زمانی که از float استفاده می کنید، عناصر به هم میچسبند).

اگر می خواهید رنگ پس زمینه تمام عرض صفحه را بگیرد می توانید به جای <a>، آن را به <ul> اضافه کنید:

ul {
  background-color: #dddddd;
}

مشاهده ی خروجی در این حالت

تا اینجای کار پایه ی کار را کدنویسی کرده ایم و حالا باید آن را استایل دهی کنیم. ما رنگ پس زمینه را سیاه می کنیم و زمانی که کاربر موس خود را روی گزینه های منو می آورد رنگ آن گزینه سیاه تر می شود:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا کلاس active را هم اضافه می کنیم:

.active {
  background-color: #4CAF50;
}

اگر بخواهید یکی از گزینه ها را به چپ یا راست ببرید می توانید مقدار float را به right یا left تغییر دهید. حتی می توانید آن را در سطح لینک ها پیاده سازی کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li style="float:right"><a class="active" href="#about">درباره ما</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

در مثال زیر یک منوی انگلیسی آورده ایم که به آن حاشیه (border) هم داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهیم این منو را به صورت ثابت در بیاوریم می توانیم کدها را به این شکل بنویسیم:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body dir='rtl'>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>Fixed Top Navigation Bar</h1>
  <h2>صفحه را اسکرول کنید تا ثابت بودن منو را مشاهده کنید</h2>
  <h2>با اسکرول کردن صفحه منو در جایش می ماند</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این مثال ساده است و ممکن است در گوشی های موبایل به درستی نمایش داده نشود.

منوهای چسبنده

با استفاده از قابلیت ;position: sticky در عناصر <li> می توانید منوهای چسبنده داشته باشید. این نوع از منوها در بالا صفحه ثابت هستند و پس از اسکرول کردن تغییر مکان داده و به شکل دیگری به صفحه می چسبند. یعنی position آن ها بین relative و fixed تغییر می کند. منوی روکسو پلاس از همین نوع است و شما می بینید که با اسکرول کردن موقعیت آن تغییر می کند.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: مرورگر های IE و Edge 15 و نسخه های قبل تر آن از این قابلیت (sticky) پشتیبانی نمی کنند. مرورگر Safari نیز برای عملکرد صحیح به پیشوند -webkit-  نیاز دارد.

منوهای drop down

این منوها را در تمام وب سایت ها دیده اید. به کد زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در صفحه ی خروجی موس خود را روی گزینه ی drop down ببرید. متوجه می شوید که یک منوی کوچکتر ظاهر می شود. نحوه ی کار آن با توضیحاتی که ما داده ایم مشخص است.

انواع و اقسام منوهای مختلف در دنیای وب وجود دارند و ما نمی توانیم تمام آن ها را در این مقاله بیاوریم اما پایه و اساس آن ها را به شما آموزش داده ایم و با جست و جویی ساده در اینترنت می توانید تمام آن ها را یاد بگیرید. امیدوارم از این قسمت لذت برده باشید.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری صفر تا صد CSS توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

علیرضا
02 اردیبهشت 1399
نقش overflow تو ul چیه؟ چرا باید hidden باشه؟؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.