با سلام ، شرمنده من دوباره تاپیک میزنم ، اما گفتم شاید جدا درخواست رو مطرح کنم راحت تر به نتیجه برسم ، این دسته بندی رو با این شکل و ظاهر درست کردم البته اسم ها رو تغییر دادم:
این کدهای CSS در فایل style.css هستن :
و اینا هم کدهای توی پیج اصلی :
<h2>Categories</h2>
<div class="category_menu_item">
<a id="Abstract" href=" LINK BEZAR">Abstract</a>
</div>
<div class="category_menu_item">
<a id="Nature" href="LINK BEZAR">Nature</a>
</div>
<div class="category_menu_item">
<a id="City" href="http://www.ultrahdwallpapers.net/city">City</a>
</div>
<div class="category_menu_item">
<a id="Animals" href="http://www.ultrahdwallpapers.net/animals">Animals</a>
</div>
<div class="category_menu_item">
<a id="Vehicles" href="http://www.ultrahdwallpapers.net/vehicles">Vehicles</a>
</div>
<div class="category_menu_item">
<a id="Cartoons" href="http://www.ultrahdwallpapers.net/cartoons">Cartoons</a>
</div>
<div class="category_menu_item">
<a id="Games" href="http://www.ultrahdwallpapers.net/games">Games</a>
</div>
<div class="category_menu_item">
<a id="Fantasy" href="http://www.ultrahdwallpapers.net/fantasy">Fantasy</a>
</div>
<br/>
که نتیجه اینا شده این منو ( البته گفتم اسم ها و یه سری تغییرات داره ) :
حالا من میخوام به بخش celeb... زیر شاخه اضافه کنم که البته ظاهر اینا به همین شکل نگه داشته بشه و فقط وقتی روی celeb کلیک شد زیر شاخه هاش نمایش داده بشه ، البته لازم نیست حتما حالت جاوا بگیره و صفحه رفرش هم بشه مشکلی نیست . در نهایت یه چیزی مثل عکس زیر که البته فقط عکسش رو درست کردم :
اگه میتونید کمکم کنید واقعا ممنون میشم .
این کدهای CSS در فایل style.css هستن :
کد:
[FONT=Monaco,monospace]#Abstract {
background-color:#E73A3A;
}[/FONT]
[FONT=Monaco,monospace]#Nature {
background-color:#FFA617;
}[/FONT]
[FONT=Monaco,monospace]#City {
background-color:#FFF935;
color:#AAAAAA;
}[/FONT]
[FONT=Monaco,monospace]#City:hover {
color:#1D4668;
}[/FONT]
[FONT=Monaco,monospace]#Animals {
background-color:#8FE746;
}[/FONT]
[FONT=Monaco,monospace]#Vehicles {
background-color:#47DBA7;
}[/FONT]
[FONT=Monaco,monospace]#Cartoons {
background-color:#47B4DB;
}[/FONT]
[FONT=Monaco,monospace]#Games {
background-color:#4773DB;
}[/FONT]
[FONT=Monaco,monospace]#Fantasy {
background-color:#DD62CF;
}
[/FONT]
.category_menu_item a {
border-radius: 10px;
border: 0px;
font-family: Arial;
color: #fff;
text-decoration: none;
width: 160px;
font-size: 13px;
display: block;
font-weight: bold;
text-align: center;
}
background-color:#E73A3A;
}[/FONT]
[FONT=Monaco,monospace]#Nature {
background-color:#FFA617;
}[/FONT]
[FONT=Monaco,monospace]#City {
background-color:#FFF935;
color:#AAAAAA;
}[/FONT]
[FONT=Monaco,monospace]#City:hover {
color:#1D4668;
}[/FONT]
[FONT=Monaco,monospace]#Animals {
background-color:#8FE746;
}[/FONT]
[FONT=Monaco,monospace]#Vehicles {
background-color:#47DBA7;
}[/FONT]
[FONT=Monaco,monospace]#Cartoons {
background-color:#47B4DB;
}[/FONT]
[FONT=Monaco,monospace]#Games {
background-color:#4773DB;
}[/FONT]
[FONT=Monaco,monospace]#Fantasy {
background-color:#DD62CF;
}
[/FONT]
.category_menu_item a {
border-radius: 10px;
border: 0px;
font-family: Arial;
color: #fff;
text-decoration: none;
width: 160px;
font-size: 13px;
display: block;
font-weight: bold;
text-align: center;
}
و اینا هم کدهای توی پیج اصلی :
کد:
<h2>Categories</h2>
<div class="category_menu_item">
<a id="Abstract" href=" LINK BEZAR">Abstract</a>
</div>
<div class="category_menu_item">
<a id="Nature" href="LINK BEZAR">Nature</a>
</div>
<div class="category_menu_item">
<a id="City" href="http://www.ultrahdwallpapers.net/city">City</a>
</div>
<div class="category_menu_item">
<a id="Animals" href="http://www.ultrahdwallpapers.net/animals">Animals</a>
</div>
<div class="category_menu_item">
<a id="Vehicles" href="http://www.ultrahdwallpapers.net/vehicles">Vehicles</a>
</div>
<div class="category_menu_item">
<a id="Cartoons" href="http://www.ultrahdwallpapers.net/cartoons">Cartoons</a>
</div>
<div class="category_menu_item">
<a id="Games" href="http://www.ultrahdwallpapers.net/games">Games</a>
</div>
<div class="category_menu_item">
<a id="Fantasy" href="http://www.ultrahdwallpapers.net/fantasy">Fantasy</a>
</div>
<br/>
که نتیجه اینا شده این منو ( البته گفتم اسم ها و یه سری تغییرات داره ) :
حالا من میخوام به بخش celeb... زیر شاخه اضافه کنم که البته ظاهر اینا به همین شکل نگه داشته بشه و فقط وقتی روی celeb کلیک شد زیر شاخه هاش نمایش داده بشه ، البته لازم نیست حتما حالت جاوا بگیره و صفحه رفرش هم بشه مشکلی نیست . در نهایت یه چیزی مثل عکس زیر که البته فقط عکسش رو درست کردم :
اگه میتونید کمکم کنید واقعا ممنون میشم .
