ساخت منوی کشویی برای تبلیغات با Html

[ahmadfononi]

در این مطلب به شما آموزش خواهیم داد که چگونه یک منوی کشویی زیبا برای قسمت تبلیغات یا موارد دیگر درست نمایید.
با استفاده از این منو شما براحتی میتوانید تبلیغات خود را در این منوها وارد نمایید.

.menu {
width:300px;
float:right;
margin:0 0 15px 0;
}
.menu_top {
width:300px;
float:right;
height:46px;
}
.menu_top h4 {
font-family: B Yekan,tahoma,Arial, Helvetica, sans-serif;
font-size:17px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
text-shadow:1px 1px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=8c8c8c]#8c8c8c[/URL]
font-weight:normal;
margin:15px 15px 0 0
}
.menu_body {
width:300px;
float:right;
direction:ltr;
position:relative;
}
.menu_body .text {
width:282px;
float:right;
margin:5px 10px 0 0;
text-align:justify;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=636363]#636363[/URL]
text-shadow:1px 1px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
line-height:23px;
direction:rtl
}
.menu_body .text img, .menu_body .text embed {
float:right;
 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin:0 6px 5px 0
}
.menu_bottom {
width:300px;
float:right;
height:10px;
}
.text_ads {
width:274px;
float:right;
margin:3px 0 0 0;
border:1px solid blue;
background:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=bb5974]#bb5974[/URL]
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
transition-property:width;
transition-duration:2s;
-moz-transition-property:height, border;
-moz-transition-duration:1s;
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-o-transition-property:width;
-o-transition-duration:2s;
height:45px;
overflow:hidden;
line-height:5px;
}
.text_ads:hover {
height:115px;
border:1px solid [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=34749a]#34749a[/URL]
}
.text_ads .text_title {
float:right;
font-family: b yekan,tahoma,Vazir;
font-size:17px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]
text-shadow:1px 1px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]
margin:21px 10px 15px 0;
width:254px;
}
.text_ads .text_desc {
float:right;
font-size:11px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]
text-shadow:1px 1px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]
font-family: b yekan,tahoma,Vazir;
margin:5px 10px
}
.text_ads .text_url {
float:right;
width:274px;
background:red;
height:30px;
text-align:left;
direction:ltr;
line-height:28px;
margin:15px 0 0 0
}
.text_ads .text_url a {
margin:0 0 0 10px;
color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
text-shadow:1px 1px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=737373]#737373[/URL]
}

با استفاده از کدهای بالا منوی کشویی شما درست می شود.
حال به سراغ کدهای Html میرویم :

<div>
<div>
<div dir="rtl"><h4>تبلیغات</h4></div>
<div><div>
 
<div>
<span>عنوان اول</span>
<span>» توضیحات تبلیغ شماره یک</span>
<span>توضیح کوتاه</span>
<span><a href="#">Site URL</a></span>
</div>
 
<div>
<span>عنوان دوم</span>
<span>» توضیحات تبلیغ شماره دو</span>
<span>توضیح کوتاه</span>
<span><a href="#">Site URL</a></span>
</div>
 
<div>
<span>عنوان سوم</span>
<span>» توضیحات تبلیغ شماره سه</span>
<span>توضیح کوتاه</span>
<span><a href="#">Site URL</a></span>
</div>
 
</div></div>

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

 

[tazeha]

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