مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش ساختن منوهای tab تــــب دار

آموزش ساختن منوهای tab تــــب دار
Lightbulb 
ما امروز می خواهیم طراحی منو و شیوه ساختن یک منوی تب دار  را به شما آموزش دهیم .

     

ابتدا استایل مورد نظر را طراحی میکنیم . این استایل رنگ فونت منوی های تب دار را سفید و پشت زمینه کادر غیر فعال را آبی و پشت زمینه کادر فعال را به صورت رنگ صورتی متمایل به جیگری در می آورد .
کد:
<style>
ul.tabs {
    margin: 0;
    padding: 0;
    float: right;
    list-style: none;
    height: 32px;
    width: 100%;
    font:12px tahoma;
}
ul.tabs li {
    float: right;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px ;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-right:none;
    font-weight: bold;
    background: #0099FF;
    overflow: hidden;
    position: relative;
    color : #FFFFFF;
}
ul.tabs li:hover {
    background: #CC0066;
}
ul.tabs li:first-child{
    border-radius:0 5px 0 0;
    -moz-border-radius:0 5px 0 0;
    -ms-border-radius:0 5px 0 0;
    -webkit-border-radius:0 5px 0 0;
    -o-border-radius:0 5px 0 0;
    -khtml-border-radius:0 5px 0 0;
    border-right:1px solid #999;
}
ul.tabs li:last-child{
    border-radius:5px 0 0 0;
    -moz-border-radius:5px 0 0 0;
    -ms-border-radius:5px 0 0 0;
    -webkit-border-radius:5px 0 0 0;
    -o-border-radius:5px 0 0 0;
    -khtml-border-radius:5px 0 0 0;
}
ul.tabs li.active{
    background: #CC0066;
    border-bottom: 1px solid #FFF;
}
.alltabs {
    border: 1px solid #999;
    clear: both;
    float: right;
    width: 100%;
    background: #FFF;
    border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    -ms-border-radius:5px 0 5px 5px;
    -webkit-border-radius:5px 0 5px 5px;
    -o-border-radius:5px 0 5px 5px;
    -khtml-border-radius:5px 0 5px 5px;
}
.tab {
    padding: 10px;
    font:11px tahoma;
    text-align:right;
    display: none;
}
</style>





اگر دوست دارید از استایل دیگری استفاده کنید ، این استایل را به شما پیشنهاد میکنم . این استایل رنگ فونت منوی های تب دار را مشکی و پشت زمینه کادر غیر فعال را خاکستری و پشت زمینه کادر فعال را به رنگ سفید در می آورد .
کد:
<style>
ul.tabs {
    margin: 0;
    padding: 0;
    float: right;
    list-style: none;
    height: 32px;
    width: 100%;
    font:12px tahoma;
}
ul.tabs li {
    float: right;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px ;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-right:none;
    font-weight: bold;
    background: #EEE;
    overflow: hidden;
    position: relative;
}
ul.tabs li:hover {
    background: #CCCCCC;
}
ul.tabs li:first-child{
    border-radius:0 5px 0 0;
    -moz-border-radius:0 5px 0 0;
    -ms-border-radius:0 5px 0 0;
    -webkit-border-radius:0 5px 0 0;
    -o-border-radius:0 5px 0 0;
    -khtml-border-radius:0 5px 0 0;
    border-right:1px solid #999;
}
ul.tabs li:last-child{
    border-radius:5px 0 0 0;
    -moz-border-radius:5px 0 0 0;
    -ms-border-radius:5px 0 0 0;
    -webkit-border-radius:5px 0 0 0;
    -o-border-radius:5px 0 0 0;
    -khtml-border-radius:5px 0 0 0;
}
ul.tabs li.active{
    background: #FFF;
    border-bottom: 1px solid #FFF;
}
.alltabs {
    border: 1px solid #999;
    clear: both;
    float: right;
    width: 100%;
    background: #FFF;
    border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    -ms-border-radius:5px 0 5px 5px;
    -webkit-border-radius:5px 0 5px 5px;
    -o-border-radius:5px 0 5px 5px;
    -khtml-border-radius:5px 0 5px 5px;
}
.tab {
    padding: 10px;
    font:11px tahoma;
    text-align:right;
    display: none;
}
</style>





یک صفحه خالی html ایجاد کنید و یکی از استایل های بالا را در صفحه وارد کنید . سپس کدهای زیر را بین قسمت <body>, </body> قرار دهید .
کد:
<div style="display:none"> </div><div id="container">

<ul class="tabs">
    <li class="active" rel="tabmenu1">منوی اول</li>
    <li rel="tabmenu2">منوی دوم</li>
    <li rel="tabmenu3">منوی سوم</li>    
</ul>






تصویر: http://www.sepna.com/images/smilies/help.png اگر خواستیم منوی دیگری اضافه کنیم چیکار باید کنیم ؟
کافیست بعد از tabmenu3 یک tabmenu جدید اضافه کنید بصورت زیر :
کد:
<li rel="tabmenu3">منوی سوم</li>    
  <li rel="tabmenu4">منوی چهارم</li>    
  <li rel="tabmenu5">منوی پنجم</li>    
.
.
.
<li rel="tabmenu-n">منوی آخر </li>





خب حالا ادامه آموزش:

بعد از ساختن اسامی منوها حال باید محتویات داخل منوها رو بسازیم . بعد از کدهای بالا ، کدهای زیر را قرار بدهید :
کد:
<div class="alltabs">

<div id="tabmenu1" class="tab">
محتویات منوی اول
</div>

<div id="tabmenu2" class="tab">
محتویات منوی دوم
</div>

<div id="tabmenu3" class="tab">
محتویات منوی سوم
</div>

</div>
</div>





تصویر: http://www.sepna.com/images/smilies/help.png اگر خواستیم محتویات منوی دیگری اضافه کنیم چیکار باید کنیم ؟
کافیست بعد از محتویات منوی tabmenu3 یک محتوای tabmenu جدید اضافه کنید بصورت زیر :
کد:
<div id="tabmenu3" class="tab">
محتویات منوی سوم
</div>

<div id="tabmenu4" class="tab">
محتویات منوی چهارم
</div>

.
.
.

<div id="tabmenu-n" class="tab">
محتویات منوی آخر
</div>

</div>
</div>





همچنین لازم هست که کد جاوای زیر هم در قسمت <head> , </head> صفحه وارد کنید .
کد:
<script src="jscripts/jquery-1.7.2.min.js"  type="text/javascript"></script>




نمونه آنلاین :

http://www.sepna.com/thread-487.html

تمام فایلهای این آموزش را می توانید از فایل ضمیمه زیر دریافت کنید :

 
.zip   tabs.zip (اندازه 34.58 KB / تعداد دانلود: 75)


 


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

به هر حال تشکر آموزش جالبی بود


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Question آموزش ایجاد rss نمایش خبر خوان اختصاصی sepna 11 2,731 ۰۹ شهریور ۱۳۹۴، ۰۲:۵۵ ب.ظ
آخرین ارسال: majidtalkhab
  آموزش تصویری ثبت سایت در الکسا ♥ Alone Boy ♥ 3 2,265 ۰۶ فروردین ۱۳۹۴، ۰۵:۱۸ ب.ظ
آخرین ارسال: Agahi90
  آموزش ایجاد منوی ضربه ای amhf 15 2,645 ۰۷ شهریور ۱۳۹۳، ۰۳:۲۸ ق.ظ
آخرین ارسال: amhf
  آموزش رفع مشکل ورود و خروج(بازگشت به صفحه قبل ) farsi200 9 4,333 ۲۷ تير ۱۳۹۳، ۱۱:۴۳ ق.ظ
آخرین ارسال: farsi200
  آموزش نصب و راه اندازی چت روم cometchat Mr-javad 9 4,238 ۲۵ تير ۱۳۹۳، ۱۰:۰۹ ب.ظ
آخرین ارسال: sarmadi
  آموزش تصویری نصب قالب مای بی بی - کامل و جامع _Arman 2 4,946 ۰۶ تير ۱۳۹۳، ۰۵:۱۴ ب.ظ
آخرین ارسال: behnam
  آموزش نوفالو کردن لینک های خروجی در مای بی بی yavar99 0 1,189 ۰۶ تير ۱۳۹۳، ۰۲:۳۰ ق.ظ
آخرین ارسال: yavar99
  آموزش تصویری نصب اسکریپت arrowchat و ست کردن آن با mybb maneoo 11 5,129 ۲۳ خرداد ۱۳۹۳، ۰۱:۲۶ ب.ظ
آخرین ارسال: naghola
  آموزش ایجاد چت روم envolve بسیار سبک و کار آمد Mr-javad 11 5,229 ۱۴ آذر ۱۳۹۲، ۱۰:۰۵ ب.ظ
آخرین ارسال: 3yeddd
  آموزش ست کردن پلاگین thx با سپاس لایک I M A N 0 1,006 ۱۱ آبان ۱۳۹۲، ۰۶:۲۵ ب.ظ
آخرین ارسال: I M A N

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir