آموزش طراحي سايت منوي شناور

درين نوشته ي علمي اشكال منوي شناور متني و تصويري را فراگيري مي دهيم طراحي سايت شركتي اين فراگيري بر اساس Css ميباشد و از جاوا در ساخت و ساز كد استعمال نشده ميباشد.يادگرفتن ساخت سايت منوي شناوردرين يادگرفتن طرز ساخت‌و‌ساز منوي شناور در Css را يادگرفتن مي دهيم
مقدمات منوي شناوريك باكس شناور ساخت‌و‌ساز فرمائيد كه هنگاميكه موشواره را روي آن قرار مي‌دهد الماني را به اكران بگذارد.
نمونه:



Mouse over me
Hello World!




مشاهده سود
 توضيح نمونهHtml : قادر است از هر الماني براي ساخت يك محتواي شناور استعمال نمايد.بعنوان نمونه المان هايي مانند a , span , button  
از يك المان محافظ مانندبراي ساخت و ساز يك محتواي شناور استعمال نماييد و المان هاي ديگر را داخل آن قرار دهيد.
تگرا در روي المان هاي ديگر قرار دهيد تا بتوانيد به محتواي شناور استايل و جاي صدق بدهيد.
Css: كلاس dropdown. از خصوصيت position:relative به كارگيري ميكند، اين خصوصيت وقتي كاربرد داراست كه بخواهيم محتواي شناور فورا پس از دكمه شناور قرار گيرد (به كارگيري از position:absolute).
كلاس dropdown-content. محتواي شناور را در خويش نگه مي دارد. اين محتوا بطور پيشفرض نهفته ميباشد و با قرار دادن موشواره روي دكمه به اكران در مي‌آيد. نكته خصوصيت min-width كه بر روي 160px تهيه شده‌است مي‌تواند بصورت ازروي اراده تغيير‌و تحول نمايد. نكته : در شرايطي كه شما مي خواهيد كه پهنا محتواي شناور به اندازه دكمه شناور باشد خصوصيت width را هم اندازه 100% و overflow:auto را براي صفحات كوچك اضافه فرماييد.
بجاي به كارگيري از بردار و فريم ما از خصوصيت CSS3 به اسم box-shadow به كارگيري كرده ايم تا منوي شناور مانند يك كارت به لحاظ رسد.
خصوصيت hover: كه تحت عنوان شبه كلاس مي‌شناسيم براي اكران محتواي شناور در هنگام قرار دادن ماوس روي دكمه شناور به فعاليت ميرود.
منوي شناورتوليد يك منوي شناور كه به يوزرها اذن گزينش در بين آيتم هاي مو جود در ليست را مي دهد:
نمونه ذيل مانند نمونه بالا ميباشد با اين تفاوت كه ما ليستي از لينك و پيوند ها را درون منوي شناور قرار داده ايم و به آن ها استايل مطلوب براي مساوي بودن با دكمه شناور را اضافه كرده ايم.
نمونه:



Dropdown
Link 1Link 2Link 3


مشاهده سود
 
در حالتي كه مي خواهيد كه منوي شناور از راست به چپ باشد. بجاي اينكه از چپ به راست باشد از خصوصيت ;right: 0 استعمال نماييد:
نمونه:
.dropdown-content {right: 0;} 
مشاهده فيض
 
نمونه هاي بيشترتصاوير شناور
چگونگي اضافه كردن يك عكس و ديگر محتواها داخل يك منوي شناور
مشاهد كد
 
ساخت‌و‌ساز منوي شناور
روش اضافه كردن منوي شناور داخل نوار منو