ساخت منوی انتخاب زبان سایت با Css3

شروع موضوع توسط administrator ‏3 آوریل 2012 در انجمن آموزش CSS

  1. administrator

    administrator مدیریت کل سایت

    تاریخ عضویت:
    ‏27 جولای 2011
    ارسال ها:
    2,989
    تشکر شده:
    1,027
    با سلام به همه کاربران عزیز

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

    این روی مرورگر های Firefox, Chrome, Safari به درستی کار میکند ولی در ie8 و opera 10 کار نمیکند.

    خوب کد html :

    کد:
    <ul>
    <li><a href="#" title="">Deutsch</a></li>
    <li><a href="#" title="">English</a></li>
    <li><a href="#" title="">Español</a></li>
    <li><a href="#" title="">Français</a></li>
    <li><a href="#" title="">??</a></li>
    <li><a href="#" title="">???????</a></li>
    <li><a href="#" title="">???</a></li>
    </ul>
    و اینم کد Css :

    کد:
    ul {
    width:150px;
    height:28px;
    font:13px Arial, Helvetica, sans-serif;
    border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
    box-shadow:0px 0px 4px #979797; -moz-box-shadow:0px 0px 4px #979797; -webkit-box-shadow:0px 0px 4px #979797;
    margin:0px;
    padding:0px;
    overflow:hidden;
    }
    ul:hover {height:auto;}
    ul a {
    color:#333333;
    text-decoration:none;
    display:block;
    line-height:22px;
    padding:0 0 0 32px;
    background:url(lang.gif) no-repeat;
    }
    ul a:hover {font-weight:bold;}
    ul li {
    width:100%;
    display:block;
    border-bottom:1px dotted #bfbfbf;
    }
    ul li:first-of-type {border-bottom:1px solid #cccccc;}
    ul li:last-of-type {border:none;}
    ul li:nth-of-type(1) a {background-position:8px 9px; line-height:28px;}
    ul li:nth-of-type(2) a {background-position:8px -19px;}
    ul li:nth-of-type(3) a {background-position:8px -41px;}
    ul li:nth-of-type(4) a {background-position:8px -63px;}
    ul li:nth-of-type(5) a {background-position:8px -85px;}
    ul li:nth-of-type(6) a {background-position:8px -107px;}
    ul li:nth-of-type(7) a {background-position:8px -129px;}
    خوب میتونید دموی انلاین رو نیز مشاهده کنید که براتون آماده کردم.

    دمـــــــــــــــوی انلاین​


    :112 (2): توجه: این مطلب توسط سایت WOC.IR گرداوری شده و کپی برداری تنها با ذکر منبع مجاز میباشد.
     
  2. javadshiry

    javadshiry کاربر جدید

    تاریخ عضویت:
    ‏19 دسامبر 2011
    ارسال ها:
    256
    تشکر شده:
    0
    یه عکس ازش بزارید لطفا