آموزش ساخت منو با CSS3

آموزش ساخت منو با CSS3

ما در این آموزش به شما نحوه ساخت یک منو با زیر منو های کشویی را  با استفاده از CSS3 و  Font Awesomeرا می دهیم .

برای مشاهده لینک وارد شود

آموزش ساخت منو با CSS3

فونت آیکون،نوعی آیکون ها هستند که از آنها به جای کلمات استفاده میشود.این به این معنی است که شما میتونید از آیکون های زیبا در تمامی مرورگر هایی که از HTML5 پشتیبانی می کنند استفاده کنید.

اکنون کد HTML را مینویسیم:

index.html

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
                <!-- More dropdown options -->
            </ul>
        </li>

        <!-- More menu items -->

    </ul>
</nav>

 

هر یک از ایتم های منو شامل زیر مجموعه هایی هستند که به آدرس مربوطه اشاره دارند و با رفتن موس بر روی آنها نمایش داده میشوند.

همانطور که شما در کد HTML بالا میبینید ما زیر مجموعه هر منو را داخل تگ UL نوشتیم.

assets/css/styles.css

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

ما ازتگ #colornav برای رنگ بندی منو ها استفاده می کنیم و در زیر برای زیر مجموعه های هر منو کد های CSS را مینویسیم.

#colorNav > ul > li{ /* will style only the top level li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

سپس با کدهای CSS زیر برای زیر منو ها استایلی تعریف می کنیم تا با رفتن موس بر روی آنها قالبشان عوض شود.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

اکنون باقی کدهای CSS رو مینویسیم

​​#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;

    /* This is important for the show/hide CSS animation */
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

 

 

#colorNav li:hover ul{
    max-height:200px;
}

 

 

#colorNav li ul li{
    background-color:#313131;
}

#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
    background-color:#363636;
}

#colorNav li ul li:hover{
    background-color:#444;
}

#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

 

 

​#colorNav li.green{
    /* This is the color of the menu item */
    background-color:#00c08b;

    /* This is the color of the icon */
    color:#127a5d;
}

#colorNav li.red{		background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{		background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{	background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{	background-color:#df6dc2;color:#9f3c85;}

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 × = سی دو