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

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

 برنامه را به زبانهای زیر می نویسیم :

CSS3, HTML4 و  jQuery

 طراحی شامل مراحل زیر است :
  • دانلود کتابخانه جی کوئری
  • ایجاد دکمه ها با css
  • ایجاد کردن اسلایدرها و پیوندها
  • استفاده از سی اس اس برای تعیین محل اسلایدرها
  • اعمال جلوه اسلایدر با زبان کوئری
اتصال به کتابخانه jquery.js
  از اینجا کتابخانه jquery.js را دانلود کنید
 اگه تو کامپیوترتون دارین کار می کنین ، صفحه وب و فایل jquery.js را توی یک پوشه قرار بدین تا راحت تر باشین  در صفحه وب و درون تگ head بوسیله تگ script ، اتصال به فایل جی کوئری را بر قرار می کنیم

 

<head>


   <script type="text/javascript" src="jquery.js" ></script>

 
</head>

 
 اما اگه خواستین توی فضای اینترنت این کار را انجام بدین مسلما باید یا کتابخانه جی کوئری را در یک سایت اپلود مثل پرشین گیگ اپلود کنید بعد ادرسشو در تگ script بدین

یا اینکه از کتابخانه سایت جی کوئری بصورت زیر استفاده کنین :

"http://code.jquery.com/jquery-latest.js"

 

<head>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">

</script>

 
</head>

ایجاد دکمه ها با css

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

 

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

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

 

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

ورزشی - هنری - سیاسی - علمی

 برای هر دکمه یک div دارم

 

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>




        <div> ورزشی </div>

        <div> هنری </div>

        <div> علمی </div>

        <div> سیاسی </div>

 

</body>


</html>

 

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

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

 

 خب حالا وقتشه که محتوای زیر منویی که با کلیک روی هر گزینه باید ظاهر بشه مشخص کنم

انها را هم در یک دایو جدا می نویسم

فقط برای هر گزینه این زیر منو از تگ a استفاده می کنم چون با کلیک روی هر کدام باید به صفحه ان برویم

زیر منوی هر دکمه را بلافاصله بعد از خودش در برنامه می نویسم

 

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>




        <div> ورزشی </div>

                   <div>

                           <a href="#" > شطرنج </a>

                           <a href="#" > ژیمناستیک</a>

                           <a href="#" > پرتاب نیزه</a>

                           <a href="#" > کبدی</a>      

                   </div>

 

        <div> هنری </div>


                  <div>

                           <a href="#" > مینا کاری </a>

                           <a href="#" > ترمه بافی</a>

                           <a href="#" > ملیله دوزی</a>

                           <a href="#" > خراطی</a>

                           <a href="#" > حصیر بافی</a>     

                           <a href="#" > کلام</a>

                   </div>


        <div> علمی </div>

                 <div>

                           <a href="#" > مدیریت</a>

                           <a href="#" > اقتصاد</a>

                           <a href="#" > سیاست</a>

                           <a href="#" > ارتباط</a>

                         

                   </div>



        <div> سیاسی </div>


                  <div>

                           <a href="#" > اخبار</a>

                           <a href="#" > سیاست خارجی</a>

                           <a href="#" >سیاست داخلی</a>                    

                   </div>

 

</body>


</html>

چرا جلوی href تگ A علامت # گذاشته ام ؟ چون هنوز مقصد پیوند را مشخص نکرده ام

 تا اینجا اجرای برنامه بصورت زیر خواهد بود

( به صورت پیش فرض ، تگ های a کنار هم ظاهر می شوند مگر اینکه با یک br ان را به خط بعدی ببریم )

 
 کنار هر تگ A یک br می گذارم تا تگ A بعدی به خط بعد برود

 



<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>




        <div> ورزشی </div>

                   <div>

                           <a href="#" > شطرنج </a><br/>

                           <a href="#" > ژیمناستیک</a><br/>

                           <a href="#" > پرتاب نیزه</a><br/>

                           <a href="#" > کبدی</a><br/>      

                   </div>

 

        <div> هنری </div>


                  <div>

                           <a href="#" > مینا کاری </a><br/>

                           <a href="#" > ترمه بافی</a><br/>

                           <a href="#" > ملیله دوزی</a><br/>

                           <a href="#" > خراطی</a><br/>

                           <a href="#" > حصیر بافی</a><br/>     

                           <a href="#" > کلام</a><br/>

                   </div>


        <div> علمی </div>

                 <div>

                           <a href="#" > مدیریت</a><br/>

                           <a href="#" > اقتصاد</a><br/>

                           <a href="#" > سیاست</a><br/>

                           <a href="#" > ارتباط</a><br/>

                         

                   </div>



        <div> سیاسی </div>


                  <div>

                           <a href="#" > اخبار</a> <br/>

                           <a href="#" > سیاست خارجی</a><br/>

                           <a href="#" >سیاست داخلی</a> <br/>                   

                   </div>

 

</body>


</html>

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

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

 

 



<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>



<div>
        <div> ورزشی </div>

                   <div>

                           <a href="#" > شطرنج </a><br/>

                           <a href="#" > ژیمناستیک</a><br/>

                           <a href="#" > پرتاب نیزه</a><br/>

                           <a href="#" > کبدی</a><br/>      

                   </div>
</div>



 
<div>
        <div> هنری </div>


                  <div>

                           <a href="#" > مینا کاری </a><br/>

                           <a href="#" > ترمه بافی</a><br/>

                           <a href="#" > ملیله دوزی</a><br/>

                           <a href="#" > خراطی</a><br/>

                           <a href="#" > حصیر بافی</a><br/>     

                           <a href="#" > کلام</a><br/>

                   </div>

</div>


<div>
        <div> علمی </div>

                 <div>

                           <a href="#" > مدیریت</a><br/>

                           <a href="#" > اقتصاد</a><br/>

                           <a href="#" > سیاست</a><br/>

                           <a href="#" > ارتباط</a><br/>

                         

                   </div>

</div>



<div>
        <div> سیاسی </div>


                  <div>

                           <a href="#" > اخبار</a><br/>

                           <a href="#" > سیاست خارجی</a><br/>

                           <a href="#" >سیاست داخلی</a> <br/>                   

                   </div>

</div>

 

</body>


</html>

 

باید نام گذاری کنیم

چطوری ؟

هر چیزی که شبیه هم است با یک نام مشخص می کنم

مثلا :

دایوی که دو دایو دیگر ( دکمه و زیر منو ) را در خود دارد به نام culomn

دایوی که دکمه است به نام button

دایوی که زیر منو است به نام menu

تگ های A همگی به نام llink-menu

 

اگر نام گذاری نکنیم چه می شود ؟

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

 



<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>



<div id="column">
        <div id="button"> ورزشی </div>

                   <div id="menu">

                           <a href="#"  id="link_menu"> شطرنج </a><br/>

                           <a href="#"  id="link_menu" > ژیمناستیک</a><br/>

                           <a href="#"  id="link_menu" > پرتاب نیزه</a><br/>

                           <a href="#"  id="link_menu" > کبدی</a><br/>      

                   </div>
</div>



 
<div id="column">
        <div id="button"> هنری </div>


                  <div id="menu">

                           <a href="#"  id="link_menu" > مینا کاری </a><br/>

                           <a href="#"  id="link_menu" > ترمه بافی</a><br/>

                           <a href="#"  id="link_menu" > ملیله دوزی</a><br/>

                           <a href="#"  id="link_menu" > خراطی</a><br/>

                           <a href="#"  id="link_menu" > حصیر بافی</a><br/>     

                           <a href="#"  id="link_menu" > کلام</a><br/>

                   </div>

</div>


<div id="column">
        <div id="button"> علمی </div>

                 <div id="menu">

                           <a href="#"  id="link_menu" > مدیریت</a><br/>

                           <a href="#"  id="link_menu" > اقتصاد</a><br/>

                           <a href="#"  id="link_menu" > سیاست</a><br/>

                           <a href="#"  id="link_menu" > ارتباط</a><br/>

                         

                   </div>

</div>



<div id="column">
        <div id="button"> سیاسی </div>


                  <div id="menu">

                           <a href="#"  id="link_menu" > اخبار</a><br/>

                           <a href="#"  id="link_menu" > سیاست خارجی</a><br/>

                           <a href="#"  id="link_menu" >سیاست داخلی</a> <br/>                   

                   </div>

</div>

</body>


</html>

 

 حالا تمام دایوها را در یک دایو بزرگ می گذارم

و نام ان را j_m می گذارم

 



<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

</head>


<body>


<div id="j_m">
<div>
        <div id="button"> ورزشی </div>

                   <div id="menu">

                           <a href="#"  id="link_menu" id="link_menu"> شطرنج </a><br/>

                           <a href="#"  id="link_menu" > ژیمناستیک</a><br/>

                           <a href="#"  id="link_menu" > پرتاب نیزه</a><br/>

                           <a href="#"  id="link_menu" > کبدی</a><br/>      

                   </div>
</div>



 
<div>
        <div id="button"> هنری </div>


                  <div id="menu">

                           <a href="#"  id="link_menu" > مینا کاری </a><br/>

                           <a href="#"  id="link_menu" > ترمه بافی</a><br/>

                           <a href="#"  id="link_menu" > ملیله دوزی</a><br/>

                           <a href="#"  id="link_menu" > خراطی</a><br/>

                           <a href="#"  id="link_menu" > حصیر بافی</a><br/>     

                           <a href="#"  id="link_menu" > کلام</a><br/>

                   </div>

</div>


<div>
        <div id="button"> علمی </div>

                 <div id="menu">

                           <a href="#"  id="link_menu" > مدیریت</a><br/>

                           <a href="#"  id="link_menu" > اقتصاد</a><br/>

                           <a href="#"  id="link_menu" > سیاست</a><br/>

                           <a href="#"  id="link_menu" > ارتباط</a><br/>

                         

                   </div>

</div>



<div>
        <div id="button"> سیاسی </div>


                  <div id="menu">

                           <a href="#"  id="link_menu" > اخبار</a><br/>

                           <a href="#"  id="link_menu" > سیاست خارجی</a><br/>

                           <a href="#"  id="link_menu" >سیاست داخلی</a> <br/>                   

                   </div>

</div>


</div>
</body>


</html>

 

از این به بعد فقط دستورات هر قسمت را می نویسم

شما هر قسمت را به تگ style خود اضافه نمائید

یعنی درون تگ head یک تگ style باز کنید

<head>

<style type="text/css">

 


</style>

</head>

 
  حالا من اگر تگ j_m را وسط صفحه بگذارم ، تمام تگ های درون ان به وسط صفحه می ایند

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

هر وقت می خواهم موقعیت چیزی را با margin مشخص کنم بهتر است عبارت position را برابر relative قرار دهم

فاصله از بالای صفحه وب را با margin-top مشخص می کنم

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

 

#j_m{
 
    position:relative;
    width:700px;

    margin:auto;
    margin-top:200px;
}


 

 حالا می خواهم تمام 4 تگ دایو column کنار هم قرار بگیرند

( اگر یادتان باشد در هر column یک دکمه و یک زیر منو قرار دارد )

برای شناور کردن تگ های column  و کنار هم قرار دادن انها من از float برابر left استفاده می کنم

با این کار هر تگ دایو column سمت چپ تگ دایو column بعدی قرار خواهد گرفت

 

#column{
float:left;}

عرض تگ مادر یعنی j-m برابر 700 نقطه است

 عرض هر تگ دایو column را 150 نقطه می گیرم

می ماند 25 نقطه دیگر

این 25 نقطه را به قسمت های 5 تایی تقسیم می کنم و سمت چپ و راست هر دایو column می گذارم تا این 4 تگ column از هم فاصله بگیرند

عرض را با width مشخص می کنم

فاصله از چپ و راست را با margin-left , margin-right مشخص می کنم

همین طور می خواهم متن هر دایو درون این دایو column وسط چین شود

پس از text-align استفاده می کنم

 


#column{
          float:left;

         width:150px;
         margin-left:5px;
         margin-right:5px;
         text-align:center;
}


 

 می خواهم زمینه هر دایو را با رنگی منحصر بفرد رنگ کنم

می توانم ویژگی background-color را درون خود تگ های button بنویسم

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

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

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

 

    .green    { background-color: #99dc30; }
    .orange    { background-color: #ffd22e; }
    .violet    { background-color: #c5b8f6; }
    .pink    { background-color: #fe2192; }

 

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

و در هر دایو این کلاس ها را صدا می زنم

( برای تکرار نکردن چند باره برنامه ، فقط دایوهایی که ویرایش شده اند می نویسم )

 

 <div id="button" class="green"> ورزشی </div>

...

<div id="button" class="orange"> هنری </div>
....

<div id="button" class="violet "> علمی </div>

....

 <div id="button" class="pink"> سیاسی </div>

نتیجه تا اینجا :

 

در این قسمت می خواهم ویژگیهایی را مشخص کنم که برای هر چهار دکمه مثل هم اند پس یک کلاس جدید مثلا با نام button_view تعریف می کنم

 

 

 

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

با استفاده از padding-top , padding-bottom فاصله ای را به بالا و پایین محتوای دایو اضافه می کنم این فاصله به رنگ زمینه دایو در می اید

 

.button_view{

            padding-top:10px;
            padding-bottom:10px;

}


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

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

به راحتی ، اسم انها را با فاصله کنار هم جلوی class بنویسید

 

 

<div id="button" class="button_view green"> ورزشی </div>

....

<div id="button" class="button_view orange"> هنری </div>

....

 <div id="button" class="button_view violet "> علمی </div>
....

 <div id="button" class="button_view pink"> سیاسی </div>

 
 حالا متن درون هر دایو دکمه را سفید و توپر می کنم برای این دو کار از ویژگیهای color , font-weight استفاده می کنم

 

.button_view{

padding-top:10px;
padding-bottom:10px;


color:white;
font-weight:bold;
}


 

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

(آموزش گرد کردن )

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

پس من مجبورم دستور تمام مرورگرها را در برنامه بنویسم

( فرض کنید می خواهم گوشه ها را با اندازه 5 پیکسل گرد کنم )

 برای IE :

    border-radius: 5px;

 برای فایر فاکس :

    -moz-border-radius: 5px;

 برای سایر مرورگرها :

   -webkit-border-radius: 5px;

 تمام دستورات بالا را به استایل دکمه اضافه می کنم

 

.button_view{

padding-top:10px;
padding-bottom:10px;


color:white;
font-weight:bold;


    border-radius: 5px;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}


 

 برای زیبا تر شد ن نمای منو ها ، می خواهم سایه ای را درون و بیرون هر دکمه قرار دهم

( آموزش سایه زدن )

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

تمام انها را باید در برنامه ام بنویسم

 

 مرورگر IE:

    box-shadow:inset 0px -4px 21px 0px #f0f0f0;

    box-shadow:0px 2px 21px 0px #3f3f3f;

 مرورگر فایر فاکس :

moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;

    -moz-box-shadow:0px 2px 21px 0px #3f3f3f

 سایر مرورگرها :

    -webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;

   -webkit-box-shadow: 0px 2px 21px 0px #3f3f3f

 
کلاس  استایل بصورت زیر می شود :

 


.button_view{

padding-top:10px;
padding-bottom:10px;


color:white;
font-weight:bold;


    border-radius: 5px;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;





    box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;

 

    box-shadow:0px 2px 21px 0px #3f3f3f;
    -moz-box-shadow:0px 2px 21px 0px #3f3f3f;
    -webkit-box-shadow: 0px 2px 21px 0px #3f3f3f;

}

 
می خواهم  متن دورن هر دکمه هم سایه داشته باشد
 برای بیشتر مرورگرها دستور این کار text-shadow است( IE از این ویژگی پشتیبانی نمی کند )
 (آموزش سایه دار کردن متن )

 

     text-shadow: 1px 1px #666;

 استایل دکمه بصورت زیر خواهد شد :

 



.button_view{

padding-top:10px;
padding-bottom:10px;


color:white;
font-weight:bold;


    border-radius: 5px;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;





    box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    box-shadow:0px 2px 21px 0px #3f3f3f;
    -moz-box-shadow:0px 2px 21px 0px #3f3f3f;
    -webkit-box-shadow: 0px 2px 21px 0px #3f3f3f;

    text-shadow: 1px 1px #666;

}

 

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

(آموزش BORDER )

 

border: 2px solid #FFF;

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

 


.button_view{

padding-top:10px;
padding-bottom:10px;


color:white;
font-weight:bold;


    border-radius: 5px;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;





    box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    -webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
    box-shadow:0px 2px 21px 0px #3f3f3f;
    -moz-box-shadow:0px 2px 21px 0px #3f3f3f;
    -webkit-box-shadow: 0px 2px 21px 0px #3f3f3f;

    text-shadow: 1px 1px #666;



    border: 2px solid #FFF;

}

 

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

من نام ای دی تمام زیر منوها را menu گذاشتم

می توانم برای تعریف استایل ها ، کلاس تعریف کنم

یا اینکه می توانم همین طوری با ذکر نام ای دی تگ های دایو ، برایشان استایل تعریف کنم

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

 

#menu {

}

 
 ایجاد فاصله 10 پیکسلی از بالای زیر منو با دکمه بالای ان

 برای این کار از margin-top استفاده می کنم

( آموزش margin )

 

 #menu {
margin-top:20px;


}

 لازم نیست در تگ های دایو مربوط به زیر منوها چیزی اضافه کنید ، همین که اسم ای دی انها را بعد از # نوشته ایم خودش می فهمد که این استایلها مربوط به تگ هایی با نام ای دی menu است
 

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

( اگر دوست داشتید طرح زمینه دایوها شفاف باشد یعنی محتوای صفحه وب از زیر این منوها دیده شود

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

 

 

 

 

 

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

 کلاسی به نام menu_1 برای اولید تگ دایو زیر منو :

.menu_1{


background-image:url('011.png');

}

 سپس این کلاس را فراخوانی می کنم :

 <div id="button" class="button_view green"> ورزشی </div>

                   <div id="menu" class="menu_1">

                           <a href="#"  id="link_menu" id="link_menu"> شطرنج </a><br/>

                           <a href="#"  id="link_menu" > ژیمناستیک</a><br/>

                           <a href="#"  id="link_menu" > پرتاب نیزه</a><br/>

                           <a href="#"  id="link_menu" > کبدی</a><br/>      

                   </div>

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

 

.menu_2{
background-image:url('0112.png');

}

 

فراخوانی این کلاس در دومین زیر منو :

 

<div id="menu" class="menu_2">

                           <a href="#"  id="link_menu" > مینا کاری </a><br/>

                           <a href="#"  id="link_menu" > ترمه بافی</a><br/>

                           <a href="#"  id="link_menu" > ملیله دوزی</a><br/>

                           <a href="#"  id="link_menu" > خراطی</a><br/>

                           <a href="#"  id="link_menu" > حصیر بافی</a><br/>     

                           <a href="#"  id="link_menu" > کلام</a><br/>

                   </div>

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

 

.menu_3{
background-image:url('0113.png');

}

 فراخوانی این کلاس در سومین زیر منو :

 

<div id="button" class="button_view violet "> علمی </div>

                 <div id="menu" class="menu_3">

                           <a href="#"  id="link_menu" > مدیریت</a><br/>

                           <a href="#"  id="link_menu" > اقتصاد</a><br/>

                           <a href="#"  id="link_menu" > سیاست</a><br/>

                           <a href="#"  id="link_menu" > ارتباط</a><br/>

                         

                   </div>

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

 

.menu_4{
background-image:url('0114.png');

}

  فراخوانی این کلاس در چهارمین زیر منو :

 

<div id="button" class="button_view pink"> سیاسی </div>


                  <div id="menu" class="menu_4">

                           <a href="#"  id="link_menu" > اخبار</a><br/>

                           <a href="#"  id="link_menu" > سیاست خارجی</a><br/>

                           <a href="#"  id="link_menu" >سیاست داخلی</a> <br/>                   

                   </div>


 

 حالا باید به بالا و پائین دایوهای زیر منو فضایی را با استفاده از padding اضافه کنم تا محتوا از لبه فاصله بگیرد

 

 

#menu {
margin-top:20px;

padding-top:20px;
padding-bottom:20px;
}

 

 نوبت به سبک بندی پیوندها می رسد

چند نکته مهم :

1- به طور پیش فرض پیوندها دارای خط زیر هستند

2- به طور پیش فرض رنگ پیوندها قبل از کلیک شدن ابی است

3- به طور پیش فرض رنگ پیوندها بعد و در ضمن کلیک شدن بنفش اند

 

مورد اول را با text-decoration بر طرف می کنم

مورد دوم و سوم را با سبک بندی رویدادهای  hover , active تغییر می دهم

 

 نام پیوندها را link_menuگذاشته بودم

مشخص می کنم هر تگی که اسم ای دی ان link_menuاست خط زیر نداشته باشد :

 

#link_menu{
 text-decoration:none;}


 برای a  و سایر حالتها ، رنگ متن مشکی باشد( یعنی هنوز که روی گزینه پیوند کلیک نشده )

 

a{
  color:black;
}


a:hover{
color:black;
}

a:active{
color:black;
}


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

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

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

پس بعد از ایجاد تغییرات دارم :

 

a{
  color:black;
width:150px;
display:block;

}

 سپس بازم خوشگل تر :

می خواهم هر وقت اشاره گر ماوس روی پیوند قرار می گیرد ، رنگ زمینه پیوند تغییر کند

a:hover{
color:black;

background: yellow;
}


 همانطور که در اجرای برنامه مشاهده کردید ، هر وقت اشاره گر ماوس روی پیوندها قرار می گیره رنگ زمینه پیوند زرد می شود

اما ارتفاع پیوند ها دقیقا برابر ارتفاع متن ان است

اگر می خواهید ارتفاع بیشتر شود یعنی متن هر پیوند از فضای بالا و پائین ان فاصله بگیرد میتوانید از padding-top , padding-bottom استفاده کنید

 

a{
  color:black;
width:150px;
padding-top:3px;
padding-bottom:3px;
display:block;

}

 

 بیاید یه مقداری بحث را پیچیده ترش کنیم

رنگ زمینه پیوندها در منوهای مختلف متفاوت بشن چی ؟

باید برای حالت hover تگ a چهار تا کلاس مختلف تعریف کنیم

 مثلا برای زیر منوی مربوط به ورزشی :

می خواهم با قرار گرفتن ماوس روی گزینه های زیر منوی ان ، رنگ زمینه پیوندها سبز شود

باید بصور ت زیر کلاسی مثلا با نام p1 برایش تعریف کنم :

 

a.p1:hover{
color:black;

background: red;
}


 بعد در تمام تگ های a مربوط به زیر منوی ورزشی کلاس p1 را صدا بزنم :

 

<div id="menu" class="menu_1 " >

                           <a href="#"  id="link_menu"  class="p1"> شطرنج </a><br/>

                           <a href="#"  id="link_menu" class="p1" > ژیمناستیک</a><br/>

                           <a href="#"  id="link_menu" class="p1"> پرتاب نیزه</a><br/>

                           <a href="#"  id="link_menu" class="p1"> کبدی</a><br/>      

                   </div>

 

 برای بقیه هم همین کار را تکرار می کنیم

اما اگر بعد از کلمه a و قبل از hover نام کلاس ننویسید هر استایلی در ان باشد برای تمام a های برنامه موقع hover انجام می شود

 

داریم می رسیم به قسمت حساس برنامه ، و ان هم انیمیشن سازی است 

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

همون طور که یادتان هست نام دایو مربوط به زیر منوها menuبود

در استایل مربوط به ان ویژگی display برابر none را اضافه می کنم

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

 

 

#menu {
margin-top:20px;

padding-top:20px;
padding-bottom:20px;


display:none;
}