یکی از مهمترین بخش های یک سایت که کاربران با آن مستقیما در ارتباط هستند، منوها می باشند. منوها سبب می شوند تا کاربران بتوانند به راحتی به بخش های مورد نظر خود دست یابند و همبن امر سبب رضایت آنها از وب سایت شما خواهد شد.
علاوه بر این وجود منوهای افقی و یا عمودی می تواند سبب زیبایی سایت شما شود و طراحی زیبای سایت یکی از اصلی ترین و اولین مواردی است که به دید کاربران خواهد امد. بنابراین داشت یک منوی زیبای افقی و عمودی می تواند نقش بسیار موثری در جذب کاربر و جذب رضایت او داشته باشد.
در ادامه مجموعه ای از کدهای html را برای اضافه کردن منوهای افقی و یا عمودی برای شما بیان خواهیم نمود. اما نکته مهم دیگری که در این رابطه وجود دارد، انتخاب مدل منو است. اینکه شما باید منوی افقی انتخاب نمایید و یا عمودی، یکی از اصلی ترین درگیری های مدیران سایت ها است. در ادامه تشریح کدهاف در رابطه با اینکه منوی افقی مناسب سایت شما است و یا منوی افقی هم صحبت خواهیم نمود و مزایا و معایب هریک را تشریح می کنیم. تا انتهای مطلب همراه ما باشید.
کدهای html برای ساخت منوی افقی و عمودی
کد html ساخت منو افقی
در این بخش ابتدا کد html ساخت منو افقی را می بینید. با استفاده از یک لیست یا ul می توانیم یک منو زیبا را ایجاد کنیم.
با یک تگ ul یک لیست ایجاد می کنیم در هر li یک لینک یا تگ a قرار می دهیم تا بتوانیم به صفحات مختلف لینک بدهیم.
<ul>
<li><a class=”active” href=”https://topsite98.com/”>topsite98</a></li>
<li><a href=”https://topsite98.com/”>News</a></li>
<li><a href=”https://topsite98.com/”>Contact</a></li>
<li><a href=”https://topsite98.com/”>About</a></li>
</ul>
کد css ساخت منو افقی
حال برای لیست یا تگ ul ، کد css ساخت منو افقی را می نویسیم.
در بخش style کد زیر را وارد می کنیم.
<style>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>
کد کامل منوی افقی
در قسمت پایین کد کامل منوی افقی را مشاهده می کنید.
این کد را می توانید در یک فایل html ذخیره کرده و اجرا کنید.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>
</head>
<body>
<ul>
<li><a class=”active” href=”https://topsite98.com/”>topsite98</a></li>
<li><a href=”https://topsite98.com/”>News</a></li>
<li><a href=”https://topsite98.com/”>Contact</a></li>
<li><a href=”https://topsite98.com/”>About</a></li>
</ul>
</body>
</html>
توضیح مختصری از کدهای css
در این بخش توضیح مختصری از کدهای css را در اختیار شما عزیزان قرار می دهیم.
با استفاده از list-style-type نقطه های اضافی را از بین می بریم.
با استفاده از margin فاصله های بیرونی را از بین می بریم تا فاصله ها زیبایی منو را از بین نبرد.
با استفاده از padding فاصله درونی را صفر می کنیم.
رنگ پس زمینه را مشخص می کنیم.
با دستور float عناصر را در کنار هم قرار می دهیم.
با دستور text-align متن را در وسط قرار می دهیم.
با دستور color رنگ متن را مشخص می کنیم.
ساخت منوی افقی دوم
در بخش پایین ساخت منوی افقی دوم را به شما آموزش می دهیم.
این کد را نیز می توانید با پسوند html ذخیره کرده و اجرا کنید.
<!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>
امیدواریم این آموزش برای شما کاربردی باشد کی توانید از بقیه آموزش های طراحی سایت ما نیز استفاده نمایید.
منوی افقی یا Horizontal Navigation
مزایا
- منو افقی، فضای بسیار کمتری از صفحه سایت را اشغال می‌کند که موجب تمرکز کاربر بر محتوا می‌شود.
- منوهای افقی، حرکت موس کاربران را محدود می‌کند.
- منوی افقی می‌تواند شامل زیر منوهای بازشونده باشند. زیرمنوهای drop down می‌توانند لینک‌های بیشتری برای هر بخش را در خود جای دهند.
معایب
- در منوهای افقی شما نمی‌توانید تعداد لینک‌های زیادی را نمایش دهید.
- اگر برای رفع مشکل قبل از زیر منوها استفاده کنید، هنگام باز شدن زیر منوها، محتوای سایت پوشیده می‌شوند.
- برای بهبود تجربه کاربری مجبورید منوی افقی را بصورت ثابت نمایش دهید یا در انتهای صفحه مجدداً لینک‌های منو را قرار دهید.
منوی عمودی یا Vertical Navigation
مزایا
- منوی عمودی به شما این امکان را می‌دهد که تعداد زیادی از لینک‌های سایت را به صورت طبقه بندی‌شده و منظم در سمت راست، چپ و یا حتی در آیکون منو در اختیار کاربران قرار دهید.
- منوی عمودی برای کاربران بسیار جذاب است؛ چرا که تعداد زیادی از لینک‌های مهم در قسمتی از سمت راست یا چپ صفحه گنجانده شده است. همچنین اگر این منو با یک آیکون نشان داده شود، می‌توان لینک‌ها را در پشت آن مخفی کرد و از شلوغ بودن یا بهم ریختگی سایت جلوگیری کرد. (همان منوی همبرگری!)
معایب
- اگر منو عمودی در یک آیکون منو گنجانده نشود، فضای بسیار زیادی از سایت را اشغال می‌کند. فضایی که می‌توانست برای نمایش محتوا استفاده شود.
- با اینکه این منو دست طراح را برای نمایش تعداد زیادی از لینک‌ها باز می‌گذارد، اما همین تعداد بالای لینک‌ها باعث سردر گمی کاربران می‌شود.
- چند سالی است که صفحات نمایش تغییرات اساسی کرده‌اند. بیشتر مانیتورها حالت افقی و عریض تری دارند. مهمترین بخش‌های سایت باید قبل از خطِ تا (پیش از اسکرول شدن سایت) دیده شوند؛ بنابراین اگر منوی عمودی بیش از اندازه طولانی باشد بیشتر لینک‌ها در جای درست خود نشان داده نمی‌شوند. به تعداد لینک‌های موجود در صفحه هم دقت کنید، زیرا موتورهای جستجو، صفحات با لینک‌های زیاد (بیش از ۱۰۰ لینک) را به عنوان اسپم شناسایی می‌کنند.
Horizontal یا Vertical؛ مسئله این است
دسترسی راحت کاربر به صفحات مختلف سایت، نکته است که در انتخاب نوع منو باید توجه ویژه به آن کنیم. منوهای پیچیده و تودرتو، کاربران را گیج می‌کنند.
منوی عمودی برای کاربران جدیدتر است و می‌تواند حس و حال یک سایت متفاوت و جدید را منتقل کند. قرار دادن منو در کنارهای سایت، فضای بیشتری برای هنرنمایی طراح سایت در اختیار می‌گذارد. امکان قرار دادن تعداد بیشتری از لینک‌های سایت، باعث می‌شود کاربران به صفحات بیشتری دسترسی داشته باشند. تحقیقات روی مسیریابی چشم کاربران نشان می‌دهد، قرار گرفتن منو در بالای صفحه بهتر عمل می‌کند. بیشتر افراد برای یافتن منو به بالای صفحه نگاه می‌کنند.
اینکه بخواهیم بگوییم کدام منو خوب است، کاملاً بستگی به ساختار سایت شما دارد. مثلاً اگر یک سایت بزرگ فروشگاهی مثل آمازون و ebay دارید می‌توانید از هر دو روش عمودی و افقی استفاده کنید. اگر یک سایت استاندارد با تعداد صفحات محدود دارید، استفاده از منوی افقی انتخاب بهتری برای شما خواهد بود.