آموزش این صفحه اصلاح شد

برنامه کامل را در ناحیه خاکستری اخر صفحه گذاشته ام

انرا در notepad کپی کنید

دو تاتصویر هم داریم که تقریبا اخرای همین صفحه قرار دارند

قول بدین با دقت و حوصله بسیار بسیار زیاد

خط به خط با من پیش بیاین

و دقیقا همون کاری را انجام بدین که من خواهم گفت

 

 

اول notepad را باز می کنم

سپس در هر مکانی می خواهم فایلم را با نام menu.html ذخیره می کنم

فقط چون من از کلمات فارسی استفاده می کنم باید موقع ذخیره کردن از لیست encoding گزینه utf-8 را انتخاب کنم

حالا  منوی افقی را ایجاد  می کنم 

 

 

 

می خواهم در این منو گزینه های زیر قرار داشته باشد :

ورزشی

سینما

هنری

علمی

شروع می کنیم

 
  ابتدا خیلی راحت و بصورت اولیه با یک تگ ul لیستی از گزینه های مورد نظرم را ایجاد می کنم

 

<html>
<body>


<ul>

<li> ورزشی </li>
<li>هنری</li>
<li>سینما</li>
<li>علمی</li>


</ul>


</body>
</html>

 

 

برنامه را ذخیره و اجرا نمائید

 

یک لیست بالت دار می بینید که سمت چپ صفحه قرار دارد

 

اول از همه بالت ها را حذف کنیم

 

چون من چهار تا li دارم برای راحتی کار اسم تمام انها را مثل هم و برابر main می گذارم و اسم ul را  هم first_menu می گذارم  یعنی بصورت زیر :

 

<html>
<body>


<ul id="first_menu">

<li id="main"> ورزشی </li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 

بهتر است استایل های سی اس اس را در تگ styleبنویسیم نه درون تگ ها

پس من تگ head , style را به برنامه اضافه می کنم :

 

<html>

<head>
<style type="text/css">


</style>
</head>



<body>



<ul id="first_menu">

<li id="main"> ورزشی </li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 

 حالا باید بالت های کنار هر گزینه لیست را حذف کنم

برای این کار ویژگی سی اس اس

list-style-type

را برابر none قرار بدهم

و همینطور ارتفاع زمینه لیست را 60 پیکسل می گیرم

و رنگ زمینه لیست را ( که با رنگ زمینه هر گزینه متفاوت است ) خاکستری

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;
background-color:gray;

height:60px;

}


</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی </li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 خط نارنجی این را مشخص کرده است

چون من نام تگ ul و li را با ویژگی id مشخص کرده ام باید موقع تعریف استایل ها  قبل از ان # گذاشت

اما اگر نام تگ را با ویژگی name مشخص کنیم موقع تعریف استایل ها علامت # نمی خواهد

 

همانطور که در اجرای صفحه manu.html مشاهده می کنید ، لیست به طور پیش فرض کمی جلوتر ازگوشه سمت چپ صفحه قرار دارد یعنی تو رفتگی دارد

من با صفر کرد ن مقادیر mergin , padding این فرورفتگی را از بین می برم

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;

}


</style>
</head>
<body>


<ul id="first_menu">

<li id="main"> ورزشی </li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>

</ul>

</body>
</html>

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

برای این کار از گزینه text-align برابر right استفاده می کنم

و همین طور برای اینکه زمینه خاکستری لیست کاملا در سمت راست قرار بگیرد از float استفاده می کنم

یعنی انرا شناور می کنم و مقدارش را برابر right می گذارم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;

text-align:right;
float:right;
}







</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 
 

 حالا باید گزینه های لیست جلوی هم قرار بگیرند

برای این منظور باید انها را بصورت شناور در اوریم

از ویژگی float استفاده می کنم

اگر مقدار ان برابر right باشد یعنی هر گزینه سمت راست گزینه بعدی اش قرار گیرد

چون ما با گزینه ها می خواهیم کار کنیم پس باید این ویژگی را برای li ها که اسمشان main بود تعریف کنیم :

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;

text-align:right;

float:right;
width:95%;

}


#main{
float:right;


}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

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

 فعلا می خواهم رنگ زمینه هر گزینه زرد شود

از ویژگی

background-color استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;

}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

بصورت پیش فرض ،  اندازه عرض هر گزینه برابر عرض نوشته هر گزینه است

یعنی اگر شما بخواهید عرض گزینه ها یکی شوند باید از ویژگی width استفاده کنید

من می خواهم عرض تمام گزینه ها برابر 100 پیکسل شود

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

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

برای این کار باید از ویژگی margin استفاده کنم

 margin یعنی ایجاد فاصله از هر چهار طرف گزینه 

همانطور که می بینید گزینه ها به هم چسبیده اند و همینطور هر گزینه به بالای لیست هم چسبیده است

من می خواهم هر گزینه از چهار طرف 10 پیکسل فاصله بگیرد

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

همانطور که در خروجی مشاهده می کنید :

هر گزینه از پائین لیست بیشتر از 10 پیکسل فاصله گرفته است

این برای این است که ارتفاع لیست بیشتر از حدی است که 10 پیکسل را به خوبی پوشش دهد

ایرادی ندارد بعدا این مشکل را هم بر طرف می کنم

 ایراد دیگر این است که :

متن هر گزینه به فضای زرد رنگ ان چسبیده است

من می توانم از padding استفاده کنم و فضای اضافی اطراف محتوای هر گزینه ایجاد کنم

این مقداردر هر چهار طرف اضافه می شود

مثلا padding را اگر 10 پیکسل بدهم این مقدار به اطراف متن هر گزینه اضافه می شود

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

 

 

در نتیجه برای ایجاد فضای اضافی در اطراف متن هر گزینه بهتر است از height استفاده کنم

من ارتفاعی برابر 40 پیکسل را برای هر گزینه در نظر می گیرم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;
float:right;
margin:0;
padding:0;

text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 می خواهم متن هر گزینه وسط محدوده ان گزینه قرار بگیرد

برای تراز افقی ، از ویژگی text-align استفاده می کنم

و اگر برای تراز عمودی از ویژگی vertical-align برابر middle استفاده کنم جواب نمی دهد لذا مجبورم از ویژگی line-height استفاده کنم

این گزینه یعنی فاصله خطوط پاراگراف از هم . اما در باره این نوع لیستی که ما داریم می سازیم فاصله از بالای ناحیه خاکتری رنگ زمینه لیست ul است

با توجه به ارتفاعی که من در نظر گرفته ام باید مقدار این گزینه را 40 پیکسل داده ام

عددهای متنع مثل صفر یا ده را بدهید تا تاثیر انها را مشاهده کنید

 

مشاهده تاثیر اعداد مختلف برای line-height

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;
float:right;
margin:0;
padding:0;

text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 می خواهم متن هر گزینه بصورت توپر باشد

از ویژگی font-weight استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;

font-weight:bold;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی



</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 

می توانید کارهای هنری دیگری را برای هر گزینه انجام دهید

مثلا گوشه های هر گزینه را گرد کنید

یا از ویژگیهای سی اس اس 3 برای زیبا سازی بیشتر هر گزینه استفاده کنید

فقط مراقب این باشید که ایا تمام مرورگرها از ان ویژگیها پشتیبانی می کنند یا نه

 
 ایجاد زیر منوها

متن هر گزینه لیست می شود عنوان ان

درون هر li یک ul تعریف می کنم

که می شود زیر منوی ان li

اسم این زیر منوها را sub_menu می گذارم :

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;
float:right;
margin:0;
padding:0;

text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

       <ul id="sub-menu">

       </ul>    

</li>


<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 می خواهم  زیرمنو برای ورزشی شامل گزینه های زیر باشد :

والیبال - بسکتبال - شنا - دو میدانی - اسب سواری

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;
float:right;
margin:0;
padding:0;

text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}




</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
               <li id="sub_item">والیبال</li>
               <li id="sub_item">بسکتبال</li>
               <li id="sub_item">شنا</li>
               <li id="sub_item">اسب سواری</li>
               <li id="sub_item">دو میدانی</li>
      </ul>

</li>

 

 

<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 برنامه را اجرا کنید

مشاهده می کنید که کنار هر گزینه لیست بالت است

حالا من بالت را حذف می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
}
    


</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 
سپس برای ان رنگ زمینه  ابی روشن به شماره E0E8FA در نظر می گیرم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
   background-color:#E0E8FA;
}
    


</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 

 همانطور که می بینید

نوشته های این لیست جلو عقب هستند

برای رفع این مشکل دو کار انجام می دهم

 

قبل از همه باید بگویم چون می خواهم ویژگیهای مربوط به گزینه های لیست را تنظیم کنم لذا باید استایل ها را برای sub_item بنویسم که اسم li ها در لیست میانبر بود 

 

اول از همه می گویم که متن گزینه ها سمت راست  محدوده هر گزینه تراز شود

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
   background-color:#E0E8FA;
 
}
    
#sub_item{

text-align:right;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 همانطور که در خروجی مشاهده می کنید ، متن به لبه سمت راست لیست ابی رنگ چسبیده است

برای رفع این مشکل با استفاده از margin فاصله از سمت راست ایجاد می کنم

دقت کنید margin فضایی را به محدوده گزینه ها اضافه نمی کند یعنی فضای هر گزینه را اضافه نمی کند بلکه فاصله ایجاد می کند بین گزینه و چیزهای اطراف ان

اما padding فضای مربوط به هر گزینه را افزایش می دهد

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
   background-color:#E0E8FA;
 
}
    
#sub_item{

text-align:right;
margin:5px;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 چون از margin استفاده کرده ام ، این مقدار در هر چهار طرف اضافه می شود

و حتی از عنوان با زمینه زرد رنگ هم فاصله می گیرد

برای اینکه فقط فاصله از سمت راست ایجاد کنم از margin-right استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
   background-color:#E0E8FA;
 
}
    
#sub_item{

text-align:right;
margin-right:5px;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

به طور پیش فرض عرض این زیر منو برابر عرض عنوان ان است

من می خواهم عرض زیر منو 50 پیکسل بیشتر از عرض عنوان ان باشد

از width در استایل مربوط به sub_menu استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
width:150px;
}


#sub_item{

text-align:right;
margin-right:5px;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

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

برای حل این مشکل من زیر منو را شناور می کنم

برای این کار از float با مقدار right در استایل های مربوط به sub_menu استفاده می کنم

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

نکته مهم :

درست است که ما بالت ها را حذف کردیم

اما جای انها و همینطور تو رفتگی ای که بصورت پیش فرض برای لیستها در نظر گرفته شده وجود دارد و زیر انها هم ابی شده است

من باید در این مرحله با صفر کرد ن margin , padding اینها را حذف کنم

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:200px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

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

می خواهم زمینه هر گزینه این زیر منو را تغییر رنگ بدهم

اول باید عرض انرا مشخص کنم

کلا عرض زیر منو 150 پیکسل بود

5 پیکسل برای فاصله گزینه های زیر منو از سمت راست گذاشتم می ماند 145

10 پیکسل هم از سمت راست بماند می شود 135

پس من باید عرض هر گزینه زیر منو را 135 پیکسل بگیرم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
width:135px;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 

 رنگ زمینه هر گزینه را هم ابی کمی تیره تر از رنگ زیر منو می گیرم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
width:135px;
background-color:#A4C0F9;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 همانطور که در اجرا می بینید  ، فضای گزینه ها انگار به سمت چپ زیر منو چسبیده اند

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

از float برابر right استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
width:135px;
background-color:#A4C0F9;
float:right;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 برنامه را اجرا کنید

خواهید دید که گزینه اول به بالای لیست چسبیده

همینطور هر گزینه از قسمت بالایش به زیر گزینه قبلی چسبیده

برای رفع این مشکل فاصله ای به اندازه 3 پیکسل از بالای هر گزینه با گزینه قبلی اش ایجاد می کنم

از amrgin-top استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
background-color:#A4C0F9;
float:right;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

دقت کنید پایین  اخرین گزینه به پائین لیست چسبده برای حل این مشکل باید در خود تگ li مربوط به اخرین گزینه margin-bottom را تنظیم کنم

چرا درون خود تگ ؟ چون فقط برای همین تگ می خواهم این گزینه را تنظیم کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;

background-color:#A4C0F9;
float:right;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 دو تا اشکال  داریم :

یکی اینکه هر گزینه به سمت راست محدوده خودش چسبیده

دوم اینکه هر گزینه دقیقا وسط محدوده اش قرار نگرفته

 

 

برای حل مشکل اول :

نمی توان از margin-right استفاده کرد . چرا ؟

چون margin فاصله یک شی از شی دیگر است مثلا فاصله گزینه لیست از خود لیست

 

اما ما می خواهیم از لبه سمت راست خود گزینه در خودش ، فاصله ای ایجاد کنیم  لذا باید فضایی را به سمت راست ان اضافه کنیم از padding-right استفاده می کنم

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;

background-color:#A4C0F9;
float:right;
padding-right:7px;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 راه حل مشکل دوم :

همانطور که قبل تر گفتم باید از line-height استفاده کنم

در منویی که من در حال طراحی ا ن بودم عدد 30 متن گزینه را در وسط عمودی محدوده هر گزینه لیست قرار می داد

شما عددهای مختلف را امتحان کنید

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;

background-color:#A4C0F9;
float:right;
padding-right:7px;
line-height:30px;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 هر گزینه زیر منو تحت تاثیر استایل های عنوان ان بصورت بولد هستند

من انرا به حالت عادی در می اورم

با این ویژگی :

font-weight: normal;

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-color:#E0E8FA;
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;
font-weight: normal;
background-color:#A4C0F9;
float:right;
padding-right:7px;
line-height:30px;
}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 حالا یه کم خوشگل ترش می کنم

فتوشاپ را باز می کنم

یه صفحه جدیدبا زمینه شفاف ایجاد می کنم

با عرض 2 سانتی متر ارتفاع 10 سانتی متر

سپس یک رنگ گرادیا ن دلخواه ایجاد می کنم و درون صفحه را پر می کنم

بعد در پالت لایه رفته و opacity این لایه را کم می کنم ( شفافش می کنم )

حتما فایل را با پسوند png ذخیره می کنم تا در صفحه وب این شفافیت اعمال شود

و محتوای زیر منو از زیر ان دیده شود

 بعد در قسمت استایل های مربوط به لیست زیر منو که نامش sub_menu بود

به جای background-color گزینه background-image را می گذارم

تصویری به نام 01  که من ایجاد کرده ام :

این تصویر خیلی باریک است اما مهم نیست بطور پیش فرض انقدر تکرار می شود تا کل زمینه لیست را پر کند

 همین کار را برای هر گزینه لیست هم انجام می دهم 

چون من یک تصویر خاص می خواهم طراحی کنم اندازه دقیق تصویر مهم است

چون باید فقط یک بار تکرار شود

و کاملا اندازه فضای هر گزینه باشد

عرض گزینه ها را 135 داده بود م

ارتفاع ان ها هم 30 بود

در ضمن 7 پیکسل هم از راست به ان اضافه کردم

در کل عرض می شود 142 و ارتفاع 30

تصویری با این اندازه در فتوشاپ ایجاد می کنم

و انرا شفاف می کنم

تصویر 02 که من طراحی کردم بصورت زیر است :

 

 برنامه :

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-image:url('01.png');
margin:0;
padding:0px;
width:150px;
float:right;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;
font-weight: normal;
background-image:url('02.png');

background-repeat: no-repeat;

float:right;
padding-right:7px;
line-height:30px;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 
 
 
 
 
 
 
 
 
 

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

زیر منوهایشان را تعریف کنین

اسم اینها هم باید همان sub_menu و sub_item باشد

تا از همان استایل هایی که تا الان تعریف کردیم استفاده کنند

 

 حالا باید این زیر منو را مخفی کنیم

از گزینه display با مقدار none استفاده می کنم

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-image:url('01.png');
margin:0;
padding:0px;
width:150px;
float:right;
display:none;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;
font-weight: normal;
background-image:url('02.png');
float:right;
padding-right:7px;
line-height:30px;
ackground-repeat: no-repeat;

}

</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

 
 زیر منو مخفی شد
 

 باید تعریف کنم که هرگاه ماوس روی هر گزینه از لیست افقی که اسم ای دی انها main بود قرار گرفت یعنی رویداد hover رخ داد

اتفاقاتی بیافتد

من این طوری دوست دارم که رنگ زمینه ان گزینه تغییر کند

پس دستورات زیر را به تگ style اضافه می کنیم :

 

#main:hover{
background-color:red;
}


 برنامه تا این لحظه :

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-image:url('01.png');
margin:0;
padding:0px;
width:150px;
float:right;
display:none;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;
font-weight: normal;
background-image:url('02.png');
float:right;
padding-right:7px;
line-height:30px;
ackground-repeat: no-repeat;

}


#main:hover{
background-color:red;
}


</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item">والیبال</li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری</li>
<li id="main">سینما</li>
<li id="main">علمی</li>


</ul>





</body>

</html>

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

باید ادرس بدیم

ادرس زیر منو بصورت زیر است :

ul#first_menu li:hover > ul#sub_menu

بعد باید بدانید ویژگی display برابر block باعث نمایش عنصر مخفی شده می شود

دستورات زیر را در تگ style اضافه می کنیم

 

ul#first_menu li:hover > ul#sub_menu

{

   display: block;

}

 

 حالا باید پیوند از هر گزینه لیست زیر منو به صفحه مورد نظرم ایجاد کنم

فرض کنید من می خواهم با کلیک روی والیبال به صفحه ای به ادرس

http://google.com بروم

باید از تگ  a استفاده کنم

 پس اولین li بصورت زیر می شود

 

 <li id="sub_item"> <a href="http://www.google.com" >والیبال</a></li>

برنامه را اجرا کنید

خواهید دید که متن والیبال زیر خط دار شده زیرا بصورت پیش فرض تمام پیوندها خط زیر دارند

باید خط زیر را حذف کنیم

باید تمام گزینه های زیر منوهایمان را پیوندی به صفحه مورد نظر داشته باشند

لذا برای همه انها اسم می گذارم مثلا اسم ای دی تمام a ها بشود page

 <li id="sub_item"> <a id="page"  href="http://www.google.com" >والیبال</a></li>

 

بعدا در تگ style سبکی را اضافه می کنم که خط زیر پیوندها را بردارد

   text-decoration: none;

باعث می شود که خط زیر حذف شود

 

#page{
    text-decoration: none;
}

برنامه را اجرا کنید

خط زیر والیبال حذف شده اما رنگ ان هم تغییر کرده

چون بصورت پیش فرض رنگ پیوندها ابی است و بعد از کلیک شدن بنفش می شود

باید بگویم رنگ پیوند در زمان عادی یعنی حالت link

در زمانی که ماوس روی ان است یعنی حالت hover

درزمانی که دکمه ماوس روی ان فشرده شده یعنی حالت active

و در زمانی که قبلا روی پیوند کلیک کرده ایم یعنی حالت visited

همواه مشکی باشد

دستورات زیر را به تگ style اضافه کنید :

a#page:link {color:black;}
a#page:visited {color:black;}
a#page:hover {color:black;}
a#page:active {color:black;}

 برنامه کامل:

 

 

<html>

<head>
<style type="text/css">

#first_menu{

list-style-type:none;

background-color:gray;

height:60px;

margin:0;
padding:0;
float:right;
text-align:right;
width:95%;

}


#main{
float:right;
background-color:yellow;
width:100px;
margin:10px;
height:40px;
text-align: center;
line-height:40px;
font-weight:bold;
}


#sub_menu{
   list-style-type:none;
background-image:url('01.png');
margin:0;
padding:0px;
width:150px;
float:right;
display:none;
}


#sub_item{

text-align:right;
margin-right:5px;
margin-top:3px;
width:135px;
height:30px;
font-weight: normal;
background-image:url('02.png');
float:right;
padding-right:7px;
line-height:30px;
ackground-repeat: no-repeat;

}


#main:hover{
background-color:red;
}


ul#first_menu li:hover > ul#sub_menu

{

   display: block;

}

#page{
    text-decoration: none;
}

a#page:link {color:black;}
a#page:visited {color:black;}
a#page:hover {color:black;}
a#page:active {color:black;}
</style>
</head>



<body>


<ul id="first_menu">

<li id="main"> ورزشی

      <ul id="sub_menu">
     
 <li id="sub_item"> <a id="page" href="http://www.google.com" >والیبال</a></li>
<li id="sub_item">بسکتبال</li>
<li id="sub_item">شنا</li>
<li id="sub_item">اسب سواری</li>
<li id="sub_item" style="margin-bottom:3px">دو میدانی</li>
</ul>

</li>
<li id="main">هنری

<ul id="sub_menu">
     
 <li id="sub_item">بافتنی</li>
<li id="sub_item">خیاطی</li>
<li id="sub_item">ربان دوزی</li>
<li id="sub_item">مرقع</li>
<li id="sub_item">خاتم کاری</li>
<li id="sub_item">منبت کاری</li>
<li id="sub_item">آشپزی</li>
<li id="sub_item">شیرینی پزی</li>
<li id="sub_item" style="margin-bottom:3px">خانه داری</li>
</ul>



</li>

<li id="main">سینما

 <ul id="sub_menu">
     
 <li id="sub_item">ایران</li>
<li id="sub_item">شرق اسیا</li>
<li id="sub_item">غرب</li>
<li id="sub_item">فیلم نامه نویسی</li>
<li id="sub_item">اصول کارگردانی</li>
<li id="sub_item" style="margin-bottom:3px">اصول بازیگری</li>
</ul>



</li>
<li id="main">علمی


<ul id="sub_menu">
     
 <li id="sub_item">ریاضی</li>
<li id="sub_item">فیزیک</li>
<li id="sub_item">هوافضا</li>
<li id="sub_item">زمین شناسی</li>

<li id="sub_item" style="margin-bottom:3px">الکترونیک</li>
</ul>


</li>


</ul>





</body>

</html>