آموزش ساختن منوی شناور برای مای بی بی

[salehkhan]

در این آموزش قصد داریم منویی شبیه شکل زیر ایجاد کنیم که هم به صورت افقی باشه و هم شناور باشد و هم چنین دارای زیر منو هم باشد . در ضمن این منو با انجمن مای بی بی تنظیم شده است .

در ابتدا استایل منو رو طراحی میکنیم و نام آنرا 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

[ma2010]

شرمنده استایل منو رو باید از کجا بسازیم؟؟؟

[میدوری]

با درود
با سپاس از مطلب خوبی که به اشتراک گذاشتید , نکته ای دیدم و عرض میکنم , فایل css نیازی به دستور <style> ندارد. این دستور در زمانی بکار می رود که در داخل فایل دیگری یاشد و سی اس اس جداگانه نباشد . از ابتدای treemenu.css حذف شود بهتر است .

[دونده آزاد]

دوست عزیز تصاویری که گذاشتید رو عوض میکنید؟
چون دیگه در دسترس نیستند.

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

[Ehssan_it]

چطوری همین رو افقی کنیم ؟

[javaweb]

با سلام-دوست عزیز دو تصویری که برای این منو به کار می رود باز نمی شود می شود دوباره آنها را قرار دهید.

[forlive]

اگر بخوایم فقط شناور باشه چی؟

[donyasat]

خرابه

[forlive]

خیر کاملا درست کار میکنه فقط باید خودتون تنظیمش کنید