۱۳۹۱/۷/۸، ۱۴:۵۴:۴۷ عصر
در این آموزش قصد داریم منویی شبیه شکل زیر ایجاد کنیم که هم به صورت افقی باشه و هم شناور باشد و هم چنین دارای زیر منو هم باشد . در ضمن این منو با انجمن مای بی بی تنظیم شده است .
![[تصویر: menu_sepna.gif]](http://uploads.sepna.com/image/public/site/menu_sepna.gif)
در ابتدا استایل منو رو طراحی میکنیم و نام آنرا treemenu.css میگذاریم و کدهای زیر را در آن قرار می دهیم . شما میتوانید نام فونت و نوع و اندازه فونت و بک گراند صفحه و منوها و زیر منوها را در همین فایل به طور دلخواه تغییر دهید .
فایل را ذخیره کرده و در کنار فایلهای انجمن قرار بدهید . هر جا که مایل بودید .
سپس وارد کنترل پنل مدیریت شوید قالب ها و پوسته ها را کلیک کنید و روی پوسته مورد نظر کلیک کرده و فایل قالب بندی global.css را باز کنید و ویرایش قالب بندی را در حالت پیشرفته قرار دهید .
و کدهای زیر را در آخر فایل اضافه کنید .
و سپس دکمه ذخیره تغییرات و بستن را بزنید . این بار روی گزینه قالب ها کلیک کنید . قالب مورد نظر را انتخاب کنید و سپس گروه قالب header templates را باز کنید و header را کلیک کنید ودر انتهای این فایل
یعنی بخش </navigation> <br> کدهای زیر را اضافه کنید .
واضح هست که لینکها را باید مطابق انجمن خودتان تنظیم و تصحیح کنید . و در آخر دو تصویر زیر را در پوشه های images/menu قرار بدهید .
![[تصویر: bullet_blue.png]](http://png-4.findicons.com/files/icons/2222/gloss_basic/16/bullet_blue.png)
دخیره کنید تصویر را با نام bullet-blue.png
![[تصویر: resultset_next.png]](http://png-3.findicons.com/files/icons/1581/silk/16/resultset_next.png)
ذخیره کنید تصویر را با نام arrow-blue-right.png
ما در این آموزش فایل treemenu.css هم در همین پوشه images/menu قرار دادیم .
و برای شناور شدن منو هم از کد زیر استفاده کردیم :
شما میتوانید جایگاه منو را با تنظیم کردن bottom:100px تغییر دهید . موفق و پیروز باشید .
منبع : http://www.sepna.com/thread-164.html
در ابتدا استایل منو رو طراحی میکنیم و نام آنرا treemenu.css میگذاریم و کدهای زیر را در آن قرار می دهیم . شما میتوانید نام فونت و نوع و اندازه فونت و بک گراند صفحه و منوها و زیر منوها را در همین فایل به طور دلخواه تغییر دهید .
کد:
/* Define the body style */
body {
font-family:tahoma;
font-size:12px;
}
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
background-color:#7f95db;
border-bottom:solid 1px white;
width:120px;
cursor:pointer;
}
/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
background-color:#6679e9;
position:relative;
}
/* We apply the link style */
#menuwrapper ul li a{
padding:5px 15px;
color:#ffffff;
display:inline-block;
text-decoration:none;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
position:absolute;
display:none;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */
#menuwrapper ul li:hover ul{
left:120px;
top:0px;
display:block;
}
/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
background-color:#cae25a;
}
/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
background-color:#b1b536;
}
/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
color:#454444;
display:inline-block;
width:120px;
}
/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
position:absolute;
display:none;
}
/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
display:block;
left:120px;
top:0;
}
/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
background:#86d3fa;
}
/* We change the background color for the level 3 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover ul li:hover{
background:#358ebc;
}
/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
color:#ffffff;
}
/* Clear float */
.clear{
clear:both;
}فایل را ذخیره کرده و در کنار فایلهای انجمن قرار بدهید . هر جا که مایل بودید .
سپس وارد کنترل پنل مدیریت شوید قالب ها و پوسته ها را کلیک کنید و روی پوسته مورد نظر کلیک کرده و فایل قالب بندی global.css را باز کنید و ویرایش قالب بندی را در حالت پیشرفته قرار دهید .
و کدهای زیر را در آخر فایل اضافه کنید .
کد:
.ggoogle2 {
border:1px solid #00aeff;
color:#000099;
font-size:12px;
line-height:12px;
padding:4px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
text-align:rightو سپس دکمه ذخیره تغییرات و بستن را بزنید . این بار روی گزینه قالب ها کلیک کنید . قالب مورد نظر را انتخاب کنید و سپس گروه قالب header templates را باز کنید و header را کلیک کنید ودر انتهای این فایل
یعنی بخش </navigation> <br> کدهای زیر را اضافه کنید .
کد:
<div style="position:fixed;left:2px;bottom:100px;z-index:1000;">
<link href="images/menu/treemenu.css" type="text/css" rel="Stylesheet">
<div id="menuwrapper">
<ul>
<li> <img src="images/menu/bullet-blue.png"> <a href="index.php">صفحه نخست</a></li>
<li> <img src="images/menu/bullet-blue.png"> <a href="member.php?action=register">ثبت نام جدید </a></li>
<li> <img src="images/menu/bullet-blue.png">
<a onclick="window.open ('http://tools.sepna.com/',null,'width=550, height=500, scrollbars=no, resizable=no');" href="javascript:void(0)" >
ابزارهای سایت </a></li>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="usercp.php">کنترل پنل </a>
<ul>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="member.php?action=login">ورود - خروج</a>
<ul>
<li><a href="member.php?action=login">ورود به سایت</a></li>
<li><a href="member.php?action=register">ثبت نام جدید</a></li>
<li><a href="member.php?action=lostpw">فراموشی کلمه عبور</a></li>
<li><a href="thread-11.html">راهنمای ثبت نام</a></li>
</ul>
</li>
<li><a href="zarinpal.php">کاربر ویژه</a></li>
<li><a href="helpcenter.php">ارسال تیکت</a></li>
<li><a href="private.php">پیام خصوصی</a></li>
</ul>
</li>
<li> <img src="images/menu/bullet-blue.png"> <a href="zarinpal.php">عضویت ویژه</a>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="forum-8.html">مقالات سپنا</a>
<ul>
<li><a href="forum-12.html"> مقالات شبکه </a> </li>
<li><a href="forum-60.html">اخبار it و اینترنت</a></li>
<li><a href="forum-15.html">کسب و کار اینترنتی</a></li>
<li><a href="forum-9.html">آرشیو مقالات</a> </li>
</ul>
</li>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="#">تالارهای دیگر</a>
<ul>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="forum-62.html">گالری تصاویر</a>
<ul>
<li><a href="forum-64.html">مدل لباس عروس</a></li>
<li><a href="forum-69.html">کاریکاتور</a></li>
<li><a href="forum-62.html">آرشیو عکس ها</a></li>
</ul>
</li>
<li><a href="forum-51.html">تفریح و سرگرمی</a></li>
<li><a href="forum-79.html">تالار بازی</a></li>
<li><a href="forum-184.html">تالار دانلود</a></li>
<li><a href="forum-240.html">تالار موبایل</a></li>
</ul>
</li>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="forum-4.html">برنامه نویسی</a>
<ul>
<li> <img src="images/menu/arrow-blue-right.png"> <a href="forum-5.html">آموزش HTML</a>
<ul>
<li><a href="forum-6.html">Html مقدماتی </a></li>
<li><a href="forum-7.html">Html پیشرفته </a></li>
<li><a href="forum-20.html">تمرینات Html </a></li>
</ul>
</li>
<li><a href="forum-84.html">آموزش PHP</a></li>
<li><a href="forum-25.html">آموزش JAVA</a></li>
</ul>
</li>
</div>
</div>واضح هست که لینکها را باید مطابق انجمن خودتان تنظیم و تصحیح کنید . و در آخر دو تصویر زیر را در پوشه های images/menu قرار بدهید .
دخیره کنید تصویر را با نام bullet-blue.png ذخیره کنید تصویر را با نام arrow-blue-right.pngما در این آموزش فایل treemenu.css هم در همین پوشه images/menu قرار دادیم .
کد:
<link href="images/menu/treemenu.css" type="text/css" rel="Stylesheet">کد:
<div style="position:fixed;left:2px;bottom:100px;z-index:1000;">شما میتوانید جایگاه منو را با تنظیم کردن bottom:100px تغییر دهید . موفق و پیروز باشید .
منبع : http://www.sepna.com/thread-164.html
