اللون : # أزرق # أبيض
: HTML / Javascript
<style type="text/css">.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background: #19BBE4;background: -webkit-linear-gradient(top, #52D2FA, #22A1F5);border-radius:8px;box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);-moz-perspective: 100px;-webkit-perspective: 100px;-o-perspective: 100px;perspective: 100px;}.menuHolder ul.nav li {display:inline-block; display:inline;}.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;}.menuHolder ul.nav li {float:right; display:block; padding:0 4px;}.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px Droid Arabic Kufi, sans-serif; color:#fff;}.menuHolder ul.nav li:hover a.top-a {background: #2AB5D8;background: -moz-linear-gradient(top, #52D2FA, #7bac37);background: -ms-linear-gradient(top, #52D2FA, #7bac37);background: -o-linear-gradient(top, #52D2FA, #7bac37);background: -webkit-linear-gradient(top, #52D2FA, #22A1F5); border-radius:8px 8px 0 0;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);}.menuHolder ul.nav div {position:absolute; top:40px; right:4px; background: #2AB5D8;background: -moz-linear-gradient(top, #52D2FA, #7bac37);background: -ms-linear-gradient(top, #52D2FA, #7bac37);background: -o-linear-gradient(top, #52D2FA, #7bac37);background: -webkit-linear-gradient(top, #52D2FA, #22A1F5); padding:5px 0 10px 0;border-radius:0 0 15px 15px;box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;-moz-transform-origin: 0px 0px;-moz-transform: rotateX(-90deg);-webkit-transform-origin: 0px 0px;-webkit-transform: rotateX(-90deg);-o-transform-origin: 0px 0px;-o-transform: rotateX(-90deg);transform-origin: 0px 0px;transform: rotateX(-90deg);-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;-o-backface-visibility: hidden;backface-visibility: hidden;}.menuHolder ul.nav div.right {right:auto; left:4px;}.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);}.menuHolder ul.nav div ul.colright {margin-right:10px;}.menuHolder ul.nav div ul.colleft {margin-left:10px;}.menuHolder ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}.menuHolder ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}.menuHolder ul.nav div ul li:last-child {border:0;}.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px Droid Arabic Kufi, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}.menuHolder ul.nav div.col1 {width:160px;}.menuHolder ul.nav div.col2 {width:310px;}.menuHolder ul.nav div.col3 {width:460px;}.menuHolder ul.nav li:hover div {-moz-transform: rotateX(0deg);-webkit-transform: rotateX(0deg);-o-transform: rotateX(0deg);transform: rotateX(0deg);}</style><div id="info"><div class="menuHolder"><ul class="nav"><li><a class="top-a" href="#url"><b>الرئيسية</b></a></li><li><a class="top-a" href="#url"><b>النوع</b></a><div class="col3"><ul class="colright"><li><a href="#url">إخباري</a></li><li><a href="#url">فوتوغرافي</a></li><li><a href="#url">ترفيهي</a></li><li><a href="#url">فني </a></li><li><a href="#url">تعليمي</a></li><li><a href="#url">ثقافي</a></li><li><a href="#url">ربحي </a></li><li><a href="#url">هندسي </a></li><li><a href="#url">طبي</a></li><li><a href="#url">شخصي</a></li><li><a href="#url">رياضي</a></li></ul><ul class="col"><li><a href="#url">عرض الافلام</a></li><li><a href="#url">عرض الازياء</a></li><li><a href="#url">عرض الموسيقى</a></li><li><a href="#url">عرض السيارات</a></li><li><a href="#url">عرض الالعاب</a></li><li><a href="#url">عرض الفيديوهات</a></li><li><a href="#url">عرض النكت</a></li><li><a href="#url">عرض النكت</a></li></ul><ul class="colleft"><li><a href="#url">أطفال</a></li><li><a href="#url">بنات</a></li><li><a href="#url">كمبيوتر و انترنت</a></li><li><a href="#url">جريدة الكترونية</a></li><li><a href="#url">متجر إلكتروني</a></li><li><a href="#url">كمال الاجسام</a></li><li><a href="#url">خاص بشركتك</a></li><li><a href="#url">التجارة </a></li><li><a href="#url">بسيط</a></li></ul></div></li><li><a class="top-a" href="#url"><b>اللون </b></a><div class="col2"><ul class="colright"><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1EQpvHY_liM13LDCcOUuDhXD1gyLCXZ-vmYfF46aPiUT4h2NZn4zsPrzyhlZpejBXJOuD_xwcXkTINO9x1fcO0TcBAbo-K_7QevqRAmwCmzx8wC4q9JRta-cXC0hBzxaiUMs2iFRdHPVW/s1600/blue.PNG " /> أزرق</a></li><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFlvMii4ubLNqkKd7jV0yFxnxvwOYZsOdBzTNZlp-3NJS2j0GHGoKi0w_uRulWapKDFXd7GTOQdB2WjYaZXflKpShZFLIuKmO1jnaweh_wmrHTtomcig1S0dgmTU7lYiZVsz3sPRp8m3vO/s1600/rouge.PNG " /> أحمر</a></li><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCSpfDnbHC6H_IRPo-JjmbbP5a3doaAR6LFv3TyLaeKY7iEsP4dAyrVNWJK2wuwxLlR9mcaPOULNFAUd5tJW_Y9PTs3jSBwl1q93jrwYE52RGHXqGIm2OpS9HIbAhhJ4DsptcQiHzoFY7/s1600/yellow.PNG " /> أصفر</a></li><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOMXI95awOk40XJZ9vMGer8aBO3-aZbxpnNmmj3Sq9J9kIqs7wQwAT7bGfjmx8s1HhxZLeGEeBKEm-mu1-iT-YgU9d8lEPYsX8IB7cWgGLrrF3Bfmj6_vWyCX61hP0aEntFJAR-aLHV-sn/s1600/rose.PNG " /> وردي</a></li><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6JB3tT46bdOWvY4jyHAfszOzduTP46s4los07X_kSjj0gP34RYnJSC0zdzOru2mKsGg1mozUvYTPHrtdJQTlyeNyr7nOfGOLvs8wopUqHbvaa8RCDJzYKxqUSqVycVLOlS1BlN9b77sE/s1600/orogwan.PNG " /> بنفسجي</a></li></ul><ul class="colleft"><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJjduuutRlBJ7-2KiDBgZUqAVnzmuU8xPi33qh0ZYOtidxuGV7o_9NTXgusdNt006WQW4GnbHQw4j9isoiC4yc-k-ViItyaDz88GizxSb9-Dz_qj-MNvRH25S48RiYevt62Vy73FpqA9H/s1600/orange.PNG " /> برتقالي </a></li><li><a href="#url"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwTbBGX026V0vN1cpbWFxVTu9CjIrzO3DfOw3N1OLns6mES57CBW6ZhWXFEzdB6NY5njykrQ4QKTZausYeQD7hygbU6Up3P-ECkMrCSdHXr8i6yT_KALhQDhRy_koOwF_gZwRQNxUecqD/s1600/grey.PNG " /> رمادي</a></li><li><a href="#url"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0yMyMQTiUg8amy5svuIovfAzEQkkvkUaqT3ZlwSIldlebCqFs7sLtz0eSYZTF3TeXANaI7WhJotYShtnymxYET7cjDOIt4UMiHdYoopm9mIoVCP31C_hbSwu3id4vg_arpuqtlQvo73e/s1600/green.PNG " /> أخضر</a></li><li><a href="#url"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz66UNyn3BUBXPu8Q3CIiEReZg1dtlbE-n50EdCG3OTHN7K19NagxkrXTByS_Ge9xUP5whImgXHCZGXhHZko_YAgxKOqxNoQhMgGbj3cwHpfnWOr9IPO4TiPM0QsHO584z67FqCeeoNro4/s1600/brown.PNG " /> بني</a></li></ul></div></li><li><a class="top-a" href="#url"><b>الأعمدة</b></a><div class="col1"><ul class="colSingle"><li><a href="#url">1 عمود</a></li><li><a href="#url">عمودين</a></li><li><a href="#url">3 أعمدة</a></li><li><a href="#url">4 أعمدة</a></li></ul></div></li><li><a class="top-a" href="#url"><b>Privacy</b></a></li><li><a class="top-a" href="#url"><b><img src=" https://cdn3.iconfinder.com/data/icons/discovery/32x32/apps/synaptic.png " /></b></a><div class="col2 right"><ul class="colright"><li><a href="#url"> <img src=" https://cdn0.iconfinder.com/data/icons/duesseldorf/16/login.png " /> القوانين</a></li><li><a href="#url"> <img src=" https://cdn3.iconfinder.com/data/icons/file-format-outline/512/pub_.pub_file_file_format_document_publisher_extension_format-16.png" /> أعلن لدينا</a></li><li><a href="#url"> <img src=" https://cdn4.iconfinder.com/data/icons/SHINE7/general/16/administrator.png " /> من نحن</a></li><li><a href="#url"> <img src=" https://cdn1.iconfinder.com/data/icons/mail-3/32/mail-02-lock-16.png " /> اتصل بنا</a></li></ul><ul class="colleft"><li><a href="#url"> <img src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-088_question-16.png" /> كيف اشتري</a></li><li><a href="#url"> <img src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-088_question-16.png" /> كيف أبيع</a></li><li><a href="#url"> <img src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-088_question-16.png" /> الأسئلة</a></li><li><a href="#url"> <img src=" https://cdn3.iconfinder.com/data/icons/metro-business/512/shield-16.png" /> Privacy</a></li></ul></div></li></ul></div><br /><br /><br /><br /><br /><br /><br /><br /></div> <!-- end info -->
# معلومات للمبتدئين:
تعرف على طريقة اضافة أداة HTML/ Javascript إلى قالب بلوجر
شرح بالصور
شرح بالفيديو
ليست هناك تعليقات:
إرسال تعليق