ساخت منوی افقی توسط CSS

۱۴ پاسخ

CSS
امروزه پیشنهاد می شود که از Semantic HTML و CSS برای ساختار وب سایت استفاده کنیم. روش بسیار خوبی است که برای ساخت منوی سایت از CSS استفاده کنیم و از CSS برای Style دادن آن بهره ببریم، ممکن است بعضی از کاربرها به دلایلی نتوانند از CSS استفاده کنند و یا آنرا غیر فعال کرده باشند، توسط این روش آنها براحتی می توانند از منو استفاده کنند.

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

ابتدا ما یک لیست برای منو درست می کنیم و در یک div قرار می دهیم.

برای نمونه :

<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

من به div یک ID اختصاص دادم که بعدا به راحتی توسط CSS به آن Style بدهم. همانطور که می دانید من در آموزش های قبلی Inline و Block را توضیح داده بودم، اجزای list به صورت block رندر می شوند، بنابراین ما نیاز داریم که آنها را به صورت inline رندر کنیم. از این کد می توانیم استفاده کنیم :

#nav ul li {
    margin:0;
    display:inline;
    padding:5px 20px;
    text-align:center;
}

همچنین من می خواهم که این منو در مرکز قرار گیرد و یک حالت hover state هم داشته باشد :

div#nav {
    width:550px;
    margin:0 auto;
    padding:5px;
}

#nav ul li:hover {
    background-color:#FF9900;
}

تمام شد ! شما می توانید هر جور که دوست داشته باشید به آن style بدهید، من کل کد HTML را هم برای شما می گذارم. اگر سوالی داشتید حتما با من در میان بگذارید.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Create horizontal navigation with CSS</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
div#nav {
	width:550px;
	margin:0 auto;
	padding:5px;
}
#nav ul li {
	margin:0;
	display:inline;
	padding:5px 20px;
	text-align:center;
}
#nav ul li:hover {
	background-color:#FF9900;
}
-->
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>
</body>
</html>

۱۴ پاسخ به “ ساخت منوی افقی توسط CSS ”

  1. شما باید اینطوری بنویسید :
    ul#nav li a و ul#nav li a:hover

  2. سلام شرمنده که من مزاحم شما میشم

    والا من css بلد نیستم واسه همین گیر افتادم تازه ۴ روزه شروع کردم یاد بگیرم

    #nav ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    #nav ul li {

    float:right;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }

    a:hover,a:active
    {
    background-color:#7A991A;
    }

    home
    about
    portfolio
    contact

    اینجور تغییرش دادم ولی بازم نشد

    لطف میکنید اگه واسم کد رو ویرایش کنید

  3. چون شما استایل لینک رو کلی تعریف کردین، برای رفع این مشکل به لیستتون یه ID یا class بدین و بعد تو css با اون ID یا class صداش کنید تا فقط به اون اعمال شه

  4. ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

    Home
    News
    Contact
    About

    سلام الان این کد رو دارم ولی مشکلش اینه که وقتی تو بلاگم میزارم هر چه لینکه تا موس میره روش به رنگ سبز در میاد یعنی تمام لینکا تحت تاثیر قرار گرفتنه

    مشکل دوم اینکه من الان هر جا بخوام منو ظااهر شه همون قسمت این کد رو باید کپی کنم ؟

    ممنون میشم کمکم کنید

  5. شما میتونید بری من ایمیل بفرستید تا براتون انجام بدم
    موفق باشید

  6. سلام ممنون و پاسخ سریعتون

    اون روش رو هم خوندم ولی چیزی که درست کردم رو دوست ندارم

    خواستم بینم کسی هست سفارش بدم واسم همچین منویی با این شمایل

    http://www.digital-kaos.co.uk/forums/f90/total-recorder-v8-0-3844-a-86742/
    طراحی کنه هزینش رو پرداخت میکنم

  7. سلام و خسته نباشید

    و تشکر بابت مطالب خوبتون .

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

    مثل سایت زیر باشه
    http://www.digital-kaos.co.uk/forums/f90/total-recorder-v8-0-3844-a-86742/

    چطوری به چه صورت باید انجام بدم

  8. این روش بدون استفاده از گرافیک هست ولی شما می تونید با کمی تغییر روی آن منوی گرافیکی هم درست کنید.
    برای این منظور این آموزش رو هم بخونید :
    http://blog.datisdesign.com/persian/?p=115

  9. من تازگی ها یه وبلاگ درست کردم که میخوام در قسمت بالایی وبلاگ منو قرار بدم آیا این راه در ویلاگ هم جواب میده؟
    آیا لازم نسیت که اجزای گرافیکی منو رو تو اینترنت آپلود کرد؟

  10. آیا لازم نیست چهره گرافیکی منوها رو تو اینترنت آپلود کنیم؟

نظر دهید