" topic " طراحی و ساخت منو ی سایت web3 ( سطح : متوسط )

[.:Mr.PSD:.]

سلام به همه دوستان با توجه به این که احسان عزیز منو رو آموزش دادم منم تصمیم گرفتن تا کد نویسی برای صفحات وب این رو اموزش بدم ، امیدوارم مورد توجه شما دوستان قرار بگیرد
البته این آموزش به صورت css3 یا همون web 3 هست که از مغادیر جالبی در اون استفاده کردم .

- ابتدا یک صفحه html باز کرده و قالب css رو با ساختار زیر تنظیم کنید .

    a#trans { background: #fff; color: #aa0000; padding: 3px; -webkit-transition: all 1s linear; }
    a#trans:hover { background: #220077; color: #fff; }
    #trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
    #trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #73CDDC url(nav-bg.png) repeat-x 0 0; }
    #trans-nav li:hover { background-position: 0 -40px; }
    #trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
    #trans-nav li a:hover { color: #a3f1d7; }
    #trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #73CDDC; list-style-type: none; padding: 0; margin: 0; }
    #trans-nav li:hover ul { opacity: 1; }
    #trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
    #trans-nav li:hover ul li { height: 30px; line-height: 30px; }
    #trans-nav li ul li a { background: #73CDDC; }
    #trans-nav li ul li a:hover { background: #3599AA; }
    #trans-nav li { -webkit-transition: all 0.2s; }
    #trans-nav li a { -webkit-transition: all 0.5s; }
    #trans-nav li ul { -webkit-transition: all 1s; }
    #trans-nav li ul li { -webkit-transition: height 0.5s; }

سپس کد زیر را در بخش body قرار دهید :

<ul id="trans-nav">
    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Thingamabobs</a></li>
            <li><a href="#">Doohickies</a></li>

        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

دوستان عزیز می توانند سوالات و نظرات خود را در همین صفحه پیگیری و پرسش کنند تا جواب آنها اعمال شود .
من دمویی از این رو قرار می دهم تا شما مشاهده نمایید :

نمایش تایپیک ساخت منو
نمایش دمو به صورت کد شده