1. صفحه اصلی
  2. مقالات
  3. ساخت انواع منو در CSS

ساخت انواع منو در 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 صفر تا صد CSS CSS
تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری صفر تا صد CSS توصیه می‌کند:

CSS چیست؟

1

Selector ها در زبان CSS

2

افزودن کدهای CSS به سند HTML

3

قالب های رنگی در CSS

4

Background (پس زمینه) در CSS

5

حاشیه ها (Borders) در زبان CSS

6

Margin ها در زبان CSS

7

کار با Padding ها در CSS

8

Outline ها در زبان CSS

9

استایل دهی به متن ها در زبان CSS

10

کار با فونت ها در زبان CSS

11

آیکون ها و لینک ها در CSS

12

استایل دهی لیست ها در CSS

13

استایل دهی جداول در CSS

14

خاصیت display در زبان CSS

15

انواع position در زبان CSS

16

ویژگی overflow در زبان CSS

17

چطور با float و clear در CSS کار کنیم؟

18

روش های ترازبندی عناصر

19

سلکتورهای پیشرفته CSS

20

شبه کلاس ها (Pseudo-class) در CSS

21

شبه عناصر (Pseudo-element) در CSS

22

آشنایی با مفهوم opacity در CSS

23

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

24

منوهای آبشاری (Drop Down) در CSS

25

ایجاد گالری تصاویر در CSS

26

کار با Sprite ها در CSS

27

سلکتورهای Attribute در CSS

28

استایل دهی فرم ها در CSS

29

شمارنده ها و واحدهای اندازه گیری در CSS

30

بررسی مفهوم Specificity در زبان CSS

31
نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

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

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

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

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 8 ماه قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو