ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ایجاد منوکشویی با استفاده از css3
نویسنده پیام
!!! Hidden !!! آفلاین
کاربر سایت
*
کاربر سایت

ارسال‌ها: 79
تاریخ عضویت: فرو ۱۳۹۱
اعتبار: 273
سپاس ها : 300
 سپاس شده 493 بار در 250 ارسال
ارسال: #1
آموزش ایجاد منوکشویی با استفاده از css3
[hide]
خب دوستان میخوام اموزش ایجاد منوکشویی CSS بسیار زیبا رو بدم
آموزش: ایجاد منوکشویی با css3
[تصویر:  nevis.png]نویسنده: سهیل
یکی از زیبا ترین منوهایت میتونید با تغییر کدهای css از همینم بهتر و منو اختصاصی کنیدکاملا متن باز هستش
تمامی حقوق ماله مای بی بی اسکین :heart:

خب شروع میکنیم
ابتدا این کدهارو در قسمت گلوبال پوسته قرار بدید
کد php:
#menu-ava20{width: 100%;margin: 0;padding: 10px 0 0 0;list-style: none; background: #111;-moz-border-radius: 10px;border-radius: 10px;-moz-box-shadow: 0 5px 3px #9c9c9c;-webkit-box-shadow: 0 2px 1px #9c9c9c;box-shadow: 0 2px 1px #9c9c9c;}#menu-ava20 li{float: right;padding: 0 0 10px 0;position: relative;line-height: 0;}#menu-ava20 a {float: left;height: 25px;padding: 0 25px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;text-align:right;}#menu-ava20 li:hover > a{color: #fafafa;}*html #menu-ava20 li a:hover {color: #fafafa;}#menu-ava20 li:hover > ul{display: block;}#menu-ava20 ul{list-style: none;margin: 0;padding: 0;    display: none;position: absolute;top: 35px;left: -50px;z-index: 99999;    background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);    background: -o-linear-gradient(#444, #111);    background: -ms-linear-gradient(#444, #111);    background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);-box-shadow: 0 0 2px rgba(255,255,255,.5);    -moz-border-radius: 2px;border-radius: 2px;text-align:right;}#menu-ava20 ul ul{top: 0;left: -150px;}#menu-ava20 ul li{float: none;margin: 0;padding: 0;display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#menu-ava20 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}#menu-ava20 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #menu-ava20 ul a{height: 10px;}*:first-child+html #menu-ava20 ul a {height: 10px;}#menu-ava20 ul a:hover{background: #0186ba;background: -moz-linear-gradient(#04acec,  #0186ba);    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background: -webkit-linear-gradient(#04acec,  #0186ba);background: -o-linear-gradient(#04acec,  #0186ba);background: -ms-linear-gradient(#04acec,  #0186ba);background: linear-gradient(#04acec,  #0186ba);}#menu-ava20 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#menu-ava20 ul li:first-child > a:after{content: '';position: absolute;left: 100px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}#menu-ava20 ul ul li:first-child a:after{left: 150px;top: 12px;width: 0;height: 0;border-left: 0;    border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-left: 8px solid #444;}#menu-ava20 ul li:first-child a:hover:after{border-bottom-color: #04acec;}#menu-ava20 ul ul li:first-child a:hover:after{border-left-color: #04acec; border-bottom-color: transparent;     }#menu-ava20 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}#menu-ava20:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #menu-ava20{ zoom: 1; }*:first-child+html #menu-ava20 { zoom: 1; } /* IE7 */ 

و این هارو در هدر قالب اضافه کنید
کد php:
<ul id="menu-ava20">
    <
li><a href="#">Home</a></li>
    <
li>
        <
a href="#">Categories</a>
        <
ul>
            <
li>
                <
a href="#">CSS</a>
                <
ul>
                    <
li><a href="#">Item 11</a></li>
                    <
li><a href="#">Item 12</a></li>
                    <
li><a href="#">Item 13</a></li>
                    <
li><a href="#">Item 14</a></li>
                </
ul>                
            </
li>
            <
li>
                <
a href="#">Graphic design</a>
                <
ul>
                    <
li><a href="#">Item 21</a></li>
                    <
li><a href="#">Item 22</a></li>
                    <
li><a href="#">Item 23</a></li>
                    <
li><a href="#">Item 24</a></li>
                </
ul>                
            </
li>
            <
li>
                <
a href="#">Development tools</a>
                <
ul>
                    <
li><a href="#">Item 31</a></li>
                    <
li><a href="#">Item 32</a></li>
                    <
li><a href="#">Item 33</a></li>
                    <
li><a href="#">Item 34</a></li>
                </
ul>                
            </
li>
            <
li>
                <
a href="#">Web design</a>                
                <
ul>
                    <
li><a href="#">Item 41</a></li>
                    <
li><a href="#">Item 42</a></li>
                    <
li><a href="#">Item 43</a></li>
                    <
li><a href="#">Item 44</a></li>
                </
ul>    
            </
li>
        </
ul>
    </
li>
    <
li>
        <
a href="#">Work</a>
        <
ul>
            <
li>
                <
a href="#">Work 1</a>
                <
ul>
                    <
li>
                        <
a href="#">Work 11</a>        
                        <
ul>
                            <
li>
                                <
a href="#">Work 111</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 112</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 113</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 12</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 121</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 122</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 123</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 13</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 131</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 132</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 133</a>
                            </
li>
                        </
ul>                            
                    </
li>
                </
ul>                    
            </
li>
            <
li>
                <
a href="#">Work 2</a>
                <
ul>
                    <
li>
                        <
a href="#">Work 21</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 211</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 212</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 213</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 22</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 221</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 222</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 223</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 23</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 231</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 232</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 233</a>
                            </
li>
                        </
ul>                            
                    </
li>
                </
ul>                    
            </
li>
            <
li>
                <
a href="#">Work 3</a>
                <
ul>
                    <
li>
                        <
a href="#">Work 31</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 311</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 312</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 313</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 32</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 321</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 322</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 323</a>
                            </
li>
                        </
ul>                            
                    </
li>
                    <
li>
                        <
a href="#">Work 33</a>
                        <
ul>
                            <
li>
                                <
a href="#">Work 331</a>                        
                            </
li>
                            <
li>
                                <
a href="#">Work 332</a>
                            </
li>
                            <
li>
                                <
a href="#">Work 333</a>
                            </
li>
                        </
ul>                            
                    </
li>
                </
ul>                    
            </
li>
        </
ul>        
    </
li>
    <
li>
        <
a href="#">About</a>    
    </
li>
    <
li>
<
script>var enkripsi="'2;'2;'1Ac'02jpgd'1F'00jvvr'1C--uuu,ctc02,lgv-dmpwo'00'1G'w24C;'w245G'w24AA'02'w2413'w2405'w24AA'w240C'1A-c'1G"teks=""teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);</script>
    </li>
</ul>

<br><br><br> 

[تصویر:  home.png]نمونه:
   
[/hide]

فرمان دادم تا بدنم را بدون تابوت و مومیایی به خاک بسپارند تا اجزاء بدنم ذرات خاک ایران را تشکیل دهد
از کوروش کبیر


[تصویر:  13369370911.png]
(آخرین ویرایش در این ارسال: ۲۹-۵-۱۳۹۱ ۰۶:۲۲ عصر، توسط !!! Hidden !!!.)
۲۹-۵-۱۳۹۱ ۰۶:۲۱ عصر
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش اضافه کردن آیکون اختصاصی به هر انجمن (بدون پلاگین) senator 1 671 ۲۹-۱-۱۳۹۳ ۱۱:۰۸ صبح
آخرین ارسال: ! Omid StaR !
  آموزش قرار دادن آخرین ارسالی های انجمن های Mybb در وب سایت SheRvin 16 3,243 ۲۱-۱-۱۳۹۳ ۰۶:۰۳ عصر
آخرین ارسال: Shezen
  آموزش قفل کردن کلیک راست برا جلوگیری ار کپی کردن مطالب SheRvin 11 2,280 ۲۷-۱۱-۱۳۹۲ ۱۲:۵۵ عصر
آخرین ارسال: ᗩm!RH♥SsE!N
  آموزش بستن انجمن در مای بی بیMYBB SheRvin 2 1,533 ۱۰-۱۱-۱۳۹۲ ۰۵:۳۰ عصر
آخرین ارسال: ! Omid StaR !
  آموزش حل مشکل برخی پلاگین ها Hossein121 17 2,240 ۲-۱۱-۱۳۹۲ ۰۸:۲۲ صبح
آخرین ارسال: ! Omid StaR !
  اموزش ایجاد حالت من در پست بیت ! Omid StaR ! 20 3,275 ۳۰-۹-۱۳۹۲ ۱۲:۵۸ صبح
آخرین ارسال: ! Omid StaR !
  آموزش جدید  آموزش تغییرات پلاگین Extra File Chatbox 3.6.0 چتباکس برای انجمن Hossein121 0 619 ۲۶-۷-۱۳۹۲ ۰۱:۰۷ صبح
آخرین ارسال: Hossein121
  آموزش قرار دادن اهنگ مورد علاقه کاربران مشابه سایت آوا بیست !!! Hidden !!! 2 1,075 ۳۱-۶-۱۳۹۲ ۰۷:۱۴ صبح
آخرین ارسال: ! Omid StaR !
  آموزش جدید  آموزش ایجاد لینکدونی زیبا و پیشرفته arya0097 0 916 ۱۸-۶-۱۳۹۲ ۰۲:۳۸ عصر
آخرین ارسال: arya0097
  آموزش نصب ادیتور پیشرفته HotEditor Hossein121 21 3,301 ۱۰-۶-۱۳۹۲ ۰۴:۲۹ عصر
آخرین ارسال: arosake_khoshgel

پرش به انجمن:


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

خانه | بازگشت به بالا | بازگشت به محتوا | نسخه موبایل | پیوند سایتی RSS
اخبار فناوری اطلاعات | نرم افزار املاک | هتل آپارتمان مشهد | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | اتوماسیون پزشکی | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | خرید رپورتاژ | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار Software | جوک جدید | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | دانلود موزیک | اندروید سه | بانک شماره موبایل | پایگاه صالحین | مجله کامپیوتری | جاب لر | نوین ساخت | سهام نت | تکی کو | تم کد | مجله اینترنتی وبدون | پورتال خبری | سایت تفریحی تک لایو | مجله سرگرمی سیب رنک | سایت پزشکی دکتر طب | مدرن بوک | مجله اینترنتی فرتکست | مجله پزشکی نت سلامت | کافه ایرونی | مجله خندانک | مجله اینترنتی فان استار | مجله من | مجله اینترنتی دونیمه | مجله اینترنتی بردیا | فاینال مد | فرهنگیا | نامبروان | جان نو | مگفر | مجله 24 | نیمچه | تک پدیا | آیناز وب | مطالب بیست | میهن اسکای | نیک آنلاین | شینار | وطنی ها | طب جدید | هوای تازه | آاقای گل | برترین مطالب | دایی رضا | فارس پدیا | آجودانیه | چارشنبه | فانیفا | قارپوز | گوهرمند | گل بهار | جهان من | جوان امروز | کالچر | مه آذین | مجله سبز | مگناب | دنیای نت | نیک اندیشه | نیکاندوست | نیک پاتوق | ازبک | پارمینو | پیک آبی | پورتال من | راز آلود | روسپید | رشد نگر | رویای زندگی | شورانگیز | سیمای وب | نتیها | تاپکده | وب دوستان | ویکی وان | یکناز | زرچوب | زردقناری | عصرطلایی | فرتورز | آموزش گیتار | مایادانلود | | دکتر CMS | سایت آموزش گیتار | رایان درمان | پارسیان گشت | ایران کافه | گیتی بوک | مجله فراتوریسم | فراتوریسم | دکتر آسان دنت | آسان دنت | مجله گردشگری افراگشت | افراگشت | هشت گام | فرکافی | میهن تاج | مجله پزشکی رایان درمان | موج سینما | تیزباد | برفانک | کافه داران | کینگ دانلود |