ایجاد منوهای زیبا به زبان css

ايجاد منوهاي اينتراکتيو با فتوشاپ و css

ابتدا يک تصوير با اندازه ارتفاع 120 پيکسل (که از دو نيمه ي 60 پيکسلي تشکيل شده)، در برنامه هاي گرافيکي مانند فتوشاپ ايجاد مي کنيم، از آنجايي که براي ايجاد منوهاي اينتراکتيو، از عنصر کليدي background-position با مقادير متفاوت در حالت عادي و hover استفاده خواهيم کرد، لذا تصوير ما بايد در دو قسمت خود، داراي دو ويژگي متفاوت باشد، تا هنگامي که در حالت فعال قرار مي گيرد، متمايز به نظر برسد.

سپس کد زير را مطابق نيازمان با تعريف لينک ها و استايل css سفارشي، تنظيم مي نمائيم:

 -----------------------------------------------------------------------------------

به آدرس زیر برید و پس از لود صفحه دکمه های

ctrl و u

رو  از صفحه نمایش بزنید.

لینک

-----------------------------------------------------------------------------------

پيش نمايش
توضيح:
- خاصيت display با مقادير inline-block و همچنين float:right کمک مي کنند تا لينک هاي ما در يک رديف قرار گيرند.
- حالت menu a يعني موقعيتي که آي دي menu در حالت لينک قرار دارد.
- حالت menu a:hover به معني حالتي است که لينک آي دي menu در حالت فعال قرار مي گيرد.
- ul و li عناصر ايجاد ليست در صفحات وب هستند و از لحاظ موتورهاي جستجو و علم سئو، شيوه اي مناسب براي ساخت منوها محسوب مي شوند.
- تغيير تصاوير در حالت عادي و فعال با قابليت background-position و مقادير آن صورت مي گيرد.