اموزش درست کردن یک منوی زیبا توسط CSS

با توجه در درخواست تعداد یاز کاربران امروز یک منوی زیبا فقط توسط CSS ساختم و در ادامه نحوه درست کردن ، دمو و لینک دانلود را قرار داده ام .

قبل از هر چیز بگم که این منو کد نویسیش خیلی خیلی ساده هستش ! یعنی کافیه که شما فقط در حد معمولی به CSS و HTML آشنا باشید .

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

توی استایل زیر چیز خاصی انجان ندادیم فقط فرون هاشو تعریف کردیم و با استفاده از list-style اون نقطه کنار لیست ها رو برداشته ایم .

 .menu ul{ font:normal 17px 'b yekan',tahoma; list-style:none; } 

خوب حالا نوبت به استایل دهی ul و li ها رسیده ( ul و li دو تگ هستند در html که برای درج منو های نا مرتب استفاده می شوند )

توی استایل زیردر خط اول تعین کریدیم که  از هر طرف li ها چقدر فاصمه داشته باشند از داخل ، در خط دوم جهت را تعیین شده است تا منو ها بصورت افقی کنار همدیگر گذاشته شوند ، در خط سوم رنگ پس زمینه را تعیین کرده ایم ، در خط چهارم نیز تعیین شده است که li ها از بالا چقدر فاصله داشته باشند در بیرون ، در خط پنجم تعیین شده است که من ها چقدر بردر یا به عبارتی کادر داشته باشند . در خط ۶-۷-۸ تعیین شده است که وقتی موس رفت روی منو ها با توجه به زمان تعیین شده به میلی سانیه  بردر هایی که تعیین شده است به پاین کشیده شود ( به زبان خیلی ساده :دی )

.menu li{ padding:10px 10px 10px 10px; float:right; background-color:#FFFFFF; margin:0 10px 0 0; border-radius:5px 5px 5px 5px; -webkit-transition: box-shadow 300ms ease-in; -moz-transition: box-shadow 300ms ease-in; transition: box-shadow 300ms ease-in; } </body> </html>