[برای 1.6] آموزش ساخت Drop Down Menu در header_welcomeblock_member ( پارسی )

[khp]

آموزش ساخت Drop Down Menu در header_welcomeblock_member ( پارسی )


درود

فک کنم 2 ساعت براش وقت گذاشتم ( تست و تغییرات و اینجا نوشتن )

پس امیدوارم به کارتون بیاد !

منبع اصلی :

http://community.mybb.com/thread-91978.html

ترجمه : Khp

واقعا خسته شدم میریم سراغ آموزش

دو فایل زیر را دانلود کنید :


  anylinkcssmenu.css (اندازه: 1.58 KB / تعداد دفعات دریافت: 15)


  anylinkcssmenu.js (اندازه: 11.3 KB / تعداد دفعات دریافت: 14)

بعد فایل anylinkcssmenu.js رو در پوشه jscripts بریزید

بعد به قالب ها و پوسته ها >> پوسته ها >> پوسته مورد نظر >> قالب بندی جدید

در قسمت نام فایل : anylinkcssmenu.css

در قسمت پیوست شده به : کلی

و محتویات من را بنویس را انتخاب کنید

و محتویات فایل Css رو در اینجا پیست کنید


و ذخیره کنید

حالا به پوسته مورد نظر >> گلوبال . سی اس اس >> ویرایش پیشرفته >> و کد های زیر را به آخر کد ها اضافه کنید !

کد php:

.anylinkcss {
    position:absolute;
    left:0;
    top:0;
    visibility:hidden;
    border:1px solid black;
    font:normal 10px Verdana;
    z-index:100;
    background:#000;
    min-width:130px;
    padding:3px
}

.anylinkcss ul{
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:left
}

.anylinkcss ul li a{
    display:block;
    padding:4px 10px 4px 4px;
    text-decoration:none;
    font-weight:bold;
    background:#d0f0ff;
    color:#000000
}

.anylinkcss ul li a:hover{
    background:#ddd;
    color:#000000
}

.anylinkshadow{
    position:absolute;
    margin-top:4px;
    left:0;
    top:0;
    z-index:99;
    background:black;
    visibility:hidden
}

ul.bloque_miembro{
    margin:0;
    padding:0
}

ul.bloque_miembro li{
    display:inline
}

ul.bloque_miembro li a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding:4px 15px;
    outline:none
}

ul.bloque_miembro li a:link,ul.bloque_miembro li a:visited{
    color:#000;
    text-decoration:none
}

ul.bloque_miembro li a:hover,ul.bloque_miembro li a:active{
    color:#515151;
    text-decoration:none
}

ul.bloque_visitante{
    margin:0;
    padding:4px;
    text-align:center
}

ul.bloque_visitante li{
    display:inline
}

ul.bloque_visitante li a{
    font-size:11px;
    font-weight:bold;
    padding:4px 50px;
    outline:none
}

ul.bloque_visitante li a:link,ul.bloque_visitante li a:visited{
    color:#000;
    text-decoration:none
}

ul.bloque_visitante li a:hover,ul.bloque_visitante li a:active{
    color:#515151;
    text-decoration:none
}        
    
input.textbox, .pagination .pagination_current, .pagination a, blockquote, .codeblock, .codeblock code, .bottommenu, textarea, fieldset, .spoiler, legend {
    border-radius: 5px 5px 5px 5px;
}
.tborder, .pm_alert, .red_alert {
    border-radius: 8px 8px 8px 8px;
}
.wg_tborder {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 0 30px #777777;
}
select {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.popup_menu {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 20px #777777;
}
.popup_menu .popup_item {
    border-radius: 5px 5px 5px 5px;
}
.navigation {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#panel, .anuncio {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.anylinkcss {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 8px #777777;
}
.button {
    border-radius: 5px 5px 5px 5px;
}
.button:hover {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}    


#panel {
    background: url(http://your url/images/yourtheme/ms.gif) repeat-x scroll left top transparent;
    color: #000000;
    font-size: 11px;
    height: 24px;
} 


توجه : در قسمت panel آدرس انجمن خودتون رو وارد کنید

و عکسی که در این ارسال موجود هست رو به پوشه ایمیج در هاست خود آپلود کنید


  fl.gif (اندازه: 1.39 KB / تعداد دفعات دریافت: 157)

از مدیران میخوام که این عکس رو ضمیمه کنن ممنون !

حالا به قالب ها و پوسته >> قالب مورد نظر >> Header templates ؟>> header_welcomeblock member برید

و کد زیر را جایگزین کد های قبلی کنید !


تذکر مهم : حتما از کد های قبلی بک آپ بگیرید

کد php:

<li style="float: right;"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"> <strong>{$lang->welcome_logout}</strong></a></li>
</ul>

<script type="text/javascript" src="http://localhost/jscripts/anylinkcssmenu.js"></script>
<script type="text/javascript">anylinkcssmenu.init("anchorclass")</script>

<div id="panel">
<ul class="bloque_miembro">
<li><a href="#" class="anchorclass" rel="mensajesforos[click]">ارسال ها  <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="comunidad[click]">انجمن <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="http://localhost/misc.php?action=help">راهنمای استفاده  </a></li>
</ul>
<ul class="bloque_miembro" style="float: right;">
<li><a href="#" class="anchorclass" rel="paneldecontrol[click]">کنترل پنل کاربر <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="usuario[click]">{$mybb->user['username']}  <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
</ul>
</div>
<div id="mensajesforos" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">فعالیت ها  </li>
<li><a href="http://localhost/search.php?action=getnew">مشاهده ارسال های جدید </a></li>
<li><a href="http://localhost/search.php?action=getdaily">مشاهده ارسال های امروز  </a></li>
</ul>
</div>
<div id="comunidad" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">انجمن </li>
<li><a href="http://localhost/memberlist.php">لیست اعضا </a></li>
<li><a href="http://localhost/showteam.php">تیم مدیریت </a></li>
<li><a href="http://localhost/online.php">افراد آنلاین </a></li>
<li><a href="http://localhost/online.php?action=today">چه کسانی امروز آنلاین بودند ؟</a></li>
</ul>
</div>
<div id="paneldecontrol" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">تنظیمات پروفایل</li>
<li><a href="http://localhost/usercp.php">کنترل پنل کاربر </a></li>
<li class="thead" style="padding:3px; font-weight:bold;">پروفایل </li>
<li><a href="http://localhost/usercp.php?action=profile">ویرایش پروفایل </a></li>
<li><a href="http://localhost/usercp.php?action=avatar">ویرایش آواتار </a></li>
<li><a href="http://localhost/usercp.php?action=editsig">ویرایش امضا</a></li>
<li>{$modcplink}{$admincplink}</li>
</ul>
</div>
<div id="usuario" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">{$mybb->user['username']} </li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}">نمایش پروفایل 
</a></li>
<li><a href="#" onclick="MyBB.popupWindow('http://localhost/misc.php?action=buddypopup', 'buddyList', 360, 460);">لیست دوستان </a></li>
<li class="thead" style="padding:3px; font-weight:bold;">پیام های خصوصی
<li><a href="http://localhost/private.php?fid=1">پیام های دریافتی </a></li>
<li><a href="http://localhost/private.php?fid=2">پیام های ارسالی </a></li>
</ul>
</div> 


تذکر : به جای your theme اسم قالبتون رو قرار بدید

و به جای localhost اسم انجمنتون رو

ذخیره کنید و تمام !!!! موفق باشید




من کد های css رو مقداری تغییر دادم تا به این شکل در اومد ! دوستان که از css ببیشتر اطلاعات دارند میتونن از اون کد یه کد فوق گرافیکی و زیبا در بیارن

از دوستانی که از css سررشته دارند میخوام که یا در همین تاپیک یا در پ.خ به من خبر بدند تا ازشون شیوه ی عکس گذاشتن در کد css رو جویا بشم !

ممنون از همگی موفق و پیروز باشید

در صورت کپی آموزش در انجمن یا سایت خود کپی رایت نویسنده و مترجم رو رعایت کنید موفق باشید

در صورت نیاز بگید تا براتون نمونه آپلود کنم


نمونه :

[rizesh]

میشه بگید این چیکار میکنه؟

[khp]

منو های کنترل پنل کاربر و کنترل پنل ناظم و کنترل پنل مدیر و ... منو های بالای انمنو به صورت کشویی نمایش میده

[MehdiD]

آهان ، من دنبال این آموزش خیلی وقته هستم ... دستت درد نکنه دوست عزیز ... با پلاگینش مشکل داشتم ...

---

هردوتا فایلی که واسه دانلود گذاشتین ، دانلود نمیشن :

Forbidden

You don't have permission to access /dynamicindex1/anylinkcssmenu.js on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

[khp]

نمونه ( اسکرین شات ) اضافه شد

فایل ها دوباره آپلود شدند ( لینک های قبلی هم قابل استفاده هستند )

[MehdiD]

فایل css رو کجا باید بریزیم ؟

[khp]

نوت پد که اسمش رو css گذاشتم رو باز کنید

و محتویات درونش رو در قالب بندی جدید پیست کنید !

[MehdiD]

من که نتونستم .... وقتی کارایی که گفتین رو انجام دادم ، این متن میاد اون بالا :

# Normal 0 false false false EN-US X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi;}

[khp]

تمامیه مراجل رو انجام دادی ؟؟؟

قالب بندی رو درست تنظیم کردید ؟

گلوبال . سی اس اس آدرس انجمنتون رو اضافه کردید ؟

در کد header template آدرس قالب و انجمن رو وارد کردید ؟

[MehdiD]

بله ، تمامی این مراحل رو انجام دادم ...

انگار دوست نداره من نصبش کنم