021-20483015

منو ناوبری در CSS

داشتن یک منو ناوبری با کاربری آسان ، برای هر وبسایتی مهم است. با استفاده از CSS می توان HTML بد ریخت و کسل کننده را به منو های زیبا و شیک تبدیل کرد.

 

منو ناوبری = لیستی از لینک ها

یک منو ناوبری به عنوان پایه به HTML استاندارد نیاز دارد. در مثال ها از لیست های استاندارد HTML برای ایجاد منو ها استفاده خواهیم کرد.
یک منو ناوبری در اصل لیستی از لینک ها می باشد. پس اصولا قرار است از عناصر <ul> و <li> استفاده کنیم.

مثال :

منو ، لیستی از لینک ها
  
مشاهده مثال



حالا نوبت به  حذف علامت آیتم ها و فضای خالی اطراف عناصر مورد نظر رسیده است.

مثال :
حذف علامت آیتم ها از لیست
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
مشاهده مثال



تشریح مثال بالا :

- ;list-style-type: none علامت آیتم ها را حذف می کند. در منو ناوبری نیازی به علامت های لیست ، نداریم.
- تنظیم margin  و padding بر روی 0 ، فضای فاصله و خالی بین لیست و کناره های محدوده عنصر را حذف می کند.

کدهای مورد استفاده در مثال بالا استانداردهای مورد استفاده در هر دو منوهای  عمودی و افقی می باشد.

 

منو عمودی

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

مثال :

منوی ناوبری عمودی
li a {
    display: block;
    width: 60px;
}
مشاهده مثال



تشریح مثال بالا :

- ;display: block : تعریف لینک ها به عنوان عناصر سطح بلوک ، نه فقط متن لینک بلکه تمام محدوده لینک را قابل کلیک می کند و امکان تعیین عرض ( یا هرکدام از صفات padding ، margin ، height و ...) را فراهم می کند.
- ;width: 60px : عناصر سطح بلوک بطور پیش فرض تمام عرض در دسترس را اشغال می کنند. در حالی که ما می خواهیم عرض را بر روی 60 پیکسل تنظیم کنیم.

حتی می توان بجای عرض عنصر <a> ، عرض <ul> را تعیین کنیم. در این حالت هم نتیجه مشابه مثال بالا ، به دست می آید.

مثال :
تعیین عرض لیست لینک ها
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
}

li a {
    display: block;
}
مشاهده مثال


 

مثال های برای منوی ناوبری عمودی

مثالی برای ایجاد منوی عمودی پایه ، با رنگ زمینه خاکستری و تغییر رنگ لینک ها به هنگام اشاره ماوس بر روی آنها توسط کاربر :

 

مثال :

مثال هایی از منوی عمودی
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;
}
مشاهده مثال


 

لینک فعال در منو

با اضافه کردن کلاس active به لینک جاری ، کاربر متوجه خواهد شد که در کدام صفحه قرار دارد :

 

مثال :

لینک های ناوبری فعال
.active {
    background-color: #4CAF50;
    color: white;
}
مشاهده مثال

 

لینک های وسط چین و اضافه کردن خط حاشیه

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

 

مثال :

لینک های وسط چین با خط حاشیه
ul {
    border: 1px solid #555;
}

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

li:last-child {
    border-bottom: none;
}
مشاهده مثال

 

منوی ثابت با ارتفاع کامل

برای فیکس شدن منو در کنار صفحه و با ارتفاعی به اندازه ارتفاع کامل صفحه ، از کدهای زیر استفاده می کنیم :

 

مثال :

منو با محل ثابت و ارتفاع کامل
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
مشاهده مثال


نکته ! این مثال ممکن است در موبایل و صفحات کوچک دیگر به درستی نمایش داده نشود.

 

منوی ناوبری افقی

دو روش برای ایجاد منو های افقی وجود دارد : استفاده از آیتم های لیست inline یا floating.
 

روش آیتم های inline

یکی از راه ها ، تعیین عناصر <li> به عنوان عنصر inline است که در تکمیل کدهای استاندارد بالا منوی مورد نظر را ایجاد می کند :

 

مثال :

منوی افقی
li {
    display: inline;
}
مشاهده مثال


تشریح مثال بالا :
;display: inline : بطور پیش فرض عناصر <li> عناصر سطح بلوک هستند و هر کدام از ابتدای سطر بعد نمایش داده می شوند. در این مثال سطر های جدید را حذف کرده ایم  و همه آیتم ها را در یک خط نمایش داده ایم.

 

روش آیتم های floating

روش دیگر برای ایجاد منوی افقی ، شناور کردن عناصر <li> و تعیین قالبی برای لینک های ناوبری می باشد.

مثال :

آیتم های لیست شناور
li {
    float: left;
}

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}
مشاهده مثال


تشریح مثال بالا :
- ;float: left : از این صفت برای قرارگیری عناصر سطح بلوک در کنار یکدیگر استفاده کرده ایم.
- ;display: block : تعیین لینک ها به عنوان عناصر سطح بلوک ، کل محدوده لینک ها را قابل کلیک می کند.
- ;padding: 8px : از آنجایی که عناصر سطح بلوک تمام عرض موجود را درگیر میکنند و برای اینکه به هم چسبیده نباشند و مناسب نمایش داده شوند ، مقداری padding به آنها اضافه می کنیم.
- ;background-color: #dddddd : رنگ پس زمینه ای خاکستری به همه عناصر a اضافه می کند.

نکته ! اگر میخواهید کل پس زمینه رنگ داشته باشد ، background-color را بجای تک تک عناصر <a> به عنصر <ul> اضافه کنید.

مثال :
رنگ زمینه کل منو
ul {
    background-color: #dddddd;
}
مشاهده مثال


 

نمونه های منوی ناوبری افقی

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

 

مثال :

مثال هایی از منوی افقی
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;
}

/* رنگ را در hover به  #111 تغییر دهید */
li a:hover {
    background-color: #111;
}
مشاهده مثال

 

لینک فعال در منو

با اضافه کردن کلاس active به لینک جاری ، کاربر متوجه خواهد شد که در کدام صفحه قرار دارد :

 

مثال :

لینک های ناوبری فعال افقی
.active {
    background-color: #4CAF50;
}
مشاهده مثال

 

لینک های چپ چین

با استفاده از ;float:left می توان آیتم های لیست یا همان لینک ها را چپ چین کرد :

 

مثال :

لینک های چپ چین
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
مشاهده مثال

 

خطوط جداکننده

با افزودن border-right در منوی انگلیسی و border-left در منوی فارسی به هر کدام از عناصر <li> ، می توان لینک ها را با خطوطی از هم جدا کرد :

 

مثال :

خط حاشیه جداکننده
 /* یک خط حاشیه چپ خاکستری به همه آیتم های لیست اضافه کنید بجز آخرین آیتم (یا زیر آیتم) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}
مشاهده مثال

 

منوی ثابت

در مثال زیر ، نحوه ثابت کردن منو در بالا یا پایین صفحه نمایش داده شده است. در این حالت ، حتی اگر کاربر صفحه را اسکرول کند ، باز هم منو در محل فیکس شده ، ثابت خواهد ماند.

فیکس در بالای صفحه :

منوی ثابت بالای صفحه
ul {
    position: fixed;
    top: 0;
    width: 100%;
}
مشاهده مثال


فیکس در پایین صفحه :
منوی ثابت پایین صفحه
ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}
مشاهده مثال


نکته ! این مثال ها ممکن است در موبایل و صفحات کوچک ، به درستی نمایش داده نشوند.

 

منوی افقی خاکستری

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

مثال :

منوی خاکستری افقی
ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}
مشاهده مثال

 

منوی بالای صفحه واکنش گرا

نحوه استفاده از CSS3 برای ایجاد منوی واکنش گرا در بالای صفحه در مثال زیر نمایش داده شده است.

مثال :

منوی واکنش گرای بالای صفحه
@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
مشاهده مثال

 

منوی واکنش گرای کنار صفحه

نحوه استفاده از CSS3 برای ایجاد منوی واکنش گرا در کنار صفحه در مثال زیر نمایش داده شده است.

 

مثال :

منوی واکنش گرای کنار صفحه
@media screen and (max-width: 1050px){
    ul.sidenav {
        width:100%;
        height:auto;
        position:relative;
    }
    ul.sidenav li a {
        float: right;
        padding: 15px;
    }
    div.content {margin-left:0;}
}

@media screen and (max-width: 400px){
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
مشاهده مثال


 

منوی افقی باز شونده (دارای زیر منو)

در مثال زیر نحوه اضافه کردن یک زیر منو به نوار ناوبری ، نمایش داده شده است.

مثال :

منوی افقی بازشونده (کشویی)
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

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);
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
مشاهده مثال


 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

مصطفی سلام سایت تان بسیار مفیده ممنوناگر کاربرد هر دستور هم ذکر شود عالی میشود باتشکر
مهدی احدی سلام مصطفی عزیز. تمام دروس قرارداده شده در این سایت با مشاهده مثال میتوانید کاربرد هر دستور رو مشاهده کنید و از آن استفاده کنید.

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط