رفتن به مطلب

منوي كشويي از به صورت fixed


پست های پیشنهاد شده

سلام .

ميخام كه يه منوي كشويي درست كنم كه به صورت افقي باز و بسته ميشه و پوزيشنش هم fixed و در سمت چپ صفحه نمايش باشه يعني با اسكرول تكون نخوره ! توش ميخام +1 گوگل لايك فيس بوك و ... بزارم و بخاطر اين ميخام كشويي باشه چون مقداري از صفحه رو نمي گيره و كاربر هر وقت خواست باز ميكنه

لینک به ارسال

http://tympanus.net/Tutorials/FixedNavigationTutorial/
http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/

لینک به ارسال

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

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


#mn_menu1
{text-align:left;
color:#fff;
font-family:Tahoma, Geneva, sans-serif;
line-height:-10px; }
#mn_menu1 a
{color:#fff;
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;padding:5px;
}
#mn_menu1 a:hover
{color:#3a345f; text-shadow:0px 1px 0px #ccc;
display:inline;
padding:5px;
-webkit-box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0
5px 10px rgba(0,0,0,0.35);
box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px
rgba(0,0,0,0.35);
}a.mn_menu_nv1
{color:fff;
text-decoration:none;
}a:link.mn_menu_nv1
{
text-decoration:overline;
}
a:hover.mn_menu_nv1{
color:#fff;
display:inline;
}
.menu2
{
background:#039;z-index:100;
}
.mn_menu_nv1
{
top:0px;z-index:100;
left:-120px;
margin-left:3px;
position:relative;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.mn_menu_nv1:hover
{
top:0px;z-index:100;
left:-5px;
margin-left:3px;
position:relative;


}
.mn_menu_td1
{ background:#1faf52;
background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
background-image:linear-gradient(left, #28bb5c, #1faf52);
padding:10px;
z-index:100;
}
.mn_menu_td2
{background:#1faf52;
background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
background-image:linear-gradient(left, #28bb5c, #1faf52);
height:10px;
padding:10px;
z-index:100;
}
.mn_menu_td3
{background:#1faf52;
background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
background-image:linear-gradient(left, #28bb5c, #1faf52);z-index:100;padding:10px;
}
.mn_menu_td4
{background:#1faf52;
background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
background-image:linear-gradient(left, #28bb5c, #1faf52); border:##9896B7 1px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius:0px 0px 10px 0px;
padding:10px;z-index:100;
}
.td5
{background:#1faf52;
background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
background-image:linear-gradient(left, #28bb5c, #1faf52); border:#9896B7 1px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius:0px ;
padding:10px;
z-index:100;
}

این کد رو هم به فایل header اضافه کن لینک هاشم که دیگه باید تغییر بدی


<div style="position: fixed; z-index:100; left:0px; top:200px;height:200px; float:left; width:200px;"><div
id="mn_menu1" style="clear:both" >
<table dir="rtl" width="150px" align="left" cellpadding="0" cellspacing="0" onmouseover="showmenua()"
onmouseout="hidemenua()" class="mn_menu_nv1" id="myMenu2" name="myMenu2">
<tr>
<td valign="top" class="td6" rowspan="5" align="center"><img
src="http://mohseneo.persiangig.com/other/mn_menu02.png"/>
</td>
<td align="right" width="200" class="td5" valign="top"><a href="#">matn</a>
</td>
</tr>
<tr align="right">
<td class="mn_menu_td1"><a href="---------adress-------">matn</a>
</td>
</tr>
<tr align="right">
<td class="mn_menu_td2"><a href="---------adress-------">matn</a>
</td>
</tr>
<tr align="right">
<td class="mn_menu_td3"><a href="---------adress-------">facebook</a>
</td>
</tr>
<tr align="right">
<td class="mn_menu_td4"><a href="---------adress-------">matn</a>
</td>
</tr>
</table>
</div></div>

ویرایش شده توسط نگار صادقی
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...