
04144235034
سلام با آموزش ساخت منو انیمشن یا به اصطلاح متحرک در خدمت کاربران ملت وب می باشیم .
این منو کاملا با css نوشته شده است و بسیار سبک می باشد دارای طراحی فلت و زیبا می باشد .
کاملا مناسب جهت استفاده در قالب هایتان امیدوارم خوشتان آمده باشد.
اکثر منو ها بر اساس لیست یا تگ های <UI> و <li> نوشته می شوند که این کد نیز نمونه ای از آن ها می باشد که ul به عنوان پدر لیست و li به عنوان فرزندان یک لیست در نظر گرفته می شوند . کد های زیر نیز گویایی این مسئله می باشد .
<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>
#colorNav > ul{ width: 450px; margin:0 auto; }
کد بالا نشان دهنده این می باشد که شما از آیدی #colorNav زیر مجموعه ul یک عرض با 450 پیکسل تعریف میکنیم می توانیم این مقدار را بیشتر نیز نمایید و margin نیز (همان حاشیه) 0 در نظر میگیریم
#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; }
دوستان هر کدام از خط ها یک عملی را انجام می دهند که میتوانید با غیر فعال کردن آن به کاربردشان دستیابی پیدا نمایید حال مهمترین مسئله در این بخش کاربرد display: inline-block; می باشد که باعث می شود آیتم ها در کنار هم قرار بگیرند یعنی به هم ریخته نباشند.
#colorNav > ul > li > a{ color:inherit; text-decoration:none !important; font-size:24px; padding: 25px; }
این بخش به رنگ متون منو ها و حاشیه های آن را استایل سازی می نمایید مهمترین المنت این بخش padding: 25px; می باشد که باعث می شود حاشیه درون منو بیشتر یا کمتر باشد.
#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 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;}