ساخت منوی آبشاری با استفاده از سی اس اس

با استفاده از ویژگیهای پیشرفته CSS، می توان خیلی راحت یک منوی آبشاری ایجاد کرد و این در حالی است که پیش از این طراحی منوی های آبشاری فقط با استفاده تصاویر پس زمینه و جاوا اسکریپت امکان پذیر بود. CSS3 براحتی این امکان را به ما می دهد تا بتوان حتی بدون نوشتن یک خط کد جاوا اسکریپت منوهایی از این دست ایجاد کرد. آشنایی مقدماتی شما با HTML و CSS می تواند به فهم شما در این آموزش کمک کند. از جمله مزیت های ساخت منوی آبشاری با استفاده از CSS به جای جاوا اسکریپت می توان به این موارد اشاره کرد:

یک: ساده تر بودن طراحی با CSS نسبت به زبان جاوا اسکریپت دو: استفاده کمتر از تصاویر در طراحی که باعث کاهش حجم بارگذاری صفحه می شود. منویی که قرار است در این آموزش به طراحی آن بپردازیم دارای 2 منوی فرعی می باشد که بعد از فعال شدن یکی از لینک های اصلی توسط نشانگر موس بصورت آبشاری باز خواهد شد. اولین منوی فرعی بصورت آبشاری از زیر منوی اصلی باز می شود که با نگه داشتن نشانگر ماوس روی یکی از گزینه های آن، منوی زیرشاخه به صورت افقی باز خواهد شد. برای ساخت این منو ابتدا نرم افزار ویرایشگر کد HTML خود را باز می کنیم (Dreamweaver، Brackets و ... از نرم افزارهای خوب ویرایشگر کد هستند اما در صورتی که به هیچکدام از آنها دسترسی ندارید می توانید از نرم افزار Notepad که به صورت پیش فرض روی تمامی ویندوزها نصب است استفاده نمایید).

ساختار کدهای HTML

<html>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Inspiration</a></li>
            </ul>
        </nav>
    </body>
</html>

  اول نیاز داریم تا برای کدهای CSS خود یک ساختار HTML طراحی کنیم (در واقع HTML زبان اصلی طراحی وب است). حال به بررسی کدهای بالا می پردازیم: تگ html (در واقع تگ به معنی قطعه کدهایی هست که در زبان طراحی وب استفاده می شود): این تگ به مرورگرها و ویرایشگرها این نکته را می فهماند که از زبان طراحی HTML برای ساخت این فایل استفاده شده است. (همانطور که می بینید تگ html در پایان کدها بسته شده است. این تگ باید در همه فایلهای HTML وجود داشته باشد.) تگ body در هر تگ html دو تگ اصلی دیگر وجود دارد head و Body. در تگ head کدهایی قرار می گیرد که قرار نیست بصورت مستقیم در صفحه وب به نمایش در بیایند و صرفاً اطلاعاتی را در مورد آن صفحه در خود ذخیره می سازد اما در تگ body کدها و متونی قرار می گیرند که بصورت مستقیم داخل مرورگر به نمایش در می آیند. تگ nav در نسخه آخر HTML یعنی HTML5 بوجود آمده و می توان لینک های اصلی سایت مثل خانه، درباره ما، تماس با ما و ... را در آن قرار داد. با استفاده از تگ ul می توان لیست های غیر شمارشی بوجود آورد (منظور از لیست های غیر شمارشی لیست هایی است که به جای عدد، در کنار آن ها یک بولت یا نقطه قرار می گیرد). برای ایجاد یک گزینه جدید در لیست هم می بایست از تگی تحت عنوان li استفاده کنیم. با استفاده از تگ a می توان یک لینک در صفحه بوجود آورد.

مقدار پارامتر href این تگ در واقع آدرسی است که قرار است با کلیک روی آن به آن صفحه برویم. در لینک های ایجاد شده در بالا مقدار تگ href برابر با # است که با کلیک بر روی این لینک ها به صفحه دیگری نخواهیم رفت و چنانچه بخواهیم به صفحه دیگری برویم می بایست یک آدرس لینک کامل را در نظر بگیریم. متنی که بین تگ آغازین و پایانی تگ a قرار می گیرد نام لینکی است که در مرورگر نشان داده می شود. در کد بالا ما یک لیست غیر شمارشی ایجاد کرده ایم که محتوای این لیست لینک های سازنده صفحه است. گزینه های این لیست به ترتیب و Inspiration، Articles ،Tutorials ،Home است. نکته ای که می توان در اینجا مطرح کرد این است که این نام ها کاملا اختیاری می باشند. در ادامه شروع به تکمیل کدها می نماییم (برای خلاصه تر شدن کدها، کدهای تکراری را نخواهیم نوشت).

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

در کد بالا می توان مشاهده کرد که برای گزینه های Tutorials و Articles با استفاده از تگ های ul و li زیر مجموعه ایجاد کرده ایم. همانطور که مشاهده می کنید تعداد زیر مجموعه ها کاملا اختیاری است بطوری که برای Tutorials سه زیر مجموعه و برای Articles دو زیر مجموعه بوجود آورده ایم.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

حالا همانطور که قبلا هم ذکر شده بود برای یکی از زیر مجموعه ها (که در اینجا Web Design در زیر شاخه Tutorials است) همانند بالا زیر مجموعه دیگری ساخته ایم. این کار با توجه به نوع منویی که می خواهید طراحی کنید می تواند تا چندین زیر مجموعه ادامه یابد.

 

آموزش نحوه ذخیره کردن یک فایل HTML در نرم افزار Notepad

 چگونه با سی اس اس یک منوی آبشاری درست کنیم

ابتدا از نوار ابزار بالایی نرم افزار به زیر شاخه File می رویم و گزینه Save As را انتخاب می کنیم. حال در پنجره باز شده در قسمت File name نامی را برای سند HTML خود انتخاب کرده و پسوند سند متنی خود (که بصورت پیش فرض txt. هست) را به html. تغییر می دهیم و قبل از ذخیره کردن، Encoding سند که بصورت خودکار روی ANSI قرار دارد را به UTF-8 تغییر می دهیم. با این کار امکان نوشتن به زبان فارسی را در سند خود بوجود خواهیم آورد. در نهایت وقتی سند ذخیره شده فایل خود را با یکی از مرورگرها باز کنیم انتظار می رود چیزی شبیه به تصویر زیر را مشاهده نمایید:

 

تا اینجای کار یک طرح منظم از روابط بین لینک ها با استفاده از زبان HTML ایجاد کردیم. در ادامه به بررسی ساختار کدهای CSS خواهیم پرداخت.

ساختار کدهای CSS همانطور که در توضیحات بالا گفتیم تگ html دارای دو بخش اصلی head و body است و در بررسی ساختار کدهای HTML تمام تغییرات ما در بخش تگ body بود اما در این قسمت می خواهیم بیشتر با تگ head و محتویات آن آشنا شویم. بنابر توضیحات داده شده، تگ هایی که در بخش head به کار می روند بصورت مستقیم در صفحات وب ظاهر نمی شوند. دسته ای از آن تگ ها، تگ هایی هستند که مربوط به CSS می شوند (در اینجا ما با نحوه های به کار بردن CSS در صفحه کاری نداریم و فقط یکی از راه ها که ساده ترین راه هست را بکار می بریم). برای بکار بردن CSS در صفحه از تگ style در head صفحه استفاده می کنند بدین صورت که ابتدا تگ style را نوشته و سپس بین تگ آغازین و پایانی، شروع به نوشتن کدهای سی اس اس می کنند.

 چگونه با سی اس اس یک منوی آبشاری درست کنیم

در کدنویسی CSS سه بخش اصلی Selector، Parameter و Value وجود دارد که در ادامه بطور کامل به بررسی آن ها می پردازیم: Selector (انتخاب کننده): کار Selector انتخاب کردن عنصری از صفحه برای استایل دادن به آن است. این انتخاب می تواند بصورت های متفاوت ID، Class یا یکی از عناصر HTML باشد. (در این قسمت ما با سومین روش کار خواهیم کرد). Declaration (تعریف): تعریف یک ویژگی خاص برای یک عنصر صفحه می باشد که دارای دو قسمت زیر است: Property (ویژگی): انتخاب یک ویژگی برای طراحی و تغییرات با استفاده از این قسمت صورت می گیرد. در یک Selector می توان چندین پارامتر قرار داد که توسط علامت ; از هم جدا می شوند. Value (مقدار): مقداری برای یک Property که می تواند از نوع عدد یا یک کلمه خاص باشد.

<html>
    <head>
        <style>
            nav ul ul {
                display: none;
            }

                nav ul li:hover > ul {
                    display: block;
                }
        <style>
    </head>
    <body>
        ...
    </body>
</html>

حال کدنویسی CSS را برای اصلی ترین بخش کار شروع می کنیم. با استفاده از قابلیت های CSS می توانیم کدهای HTML یا همان زیر شاخه های منو که پنهان هستند را بدون استفاده از ID و Class های جداگانه ای مورد هدف قرار دهیم. ابتدا منوهای فرعی را با هدف قرار دادن هر کد ul در داخل تگ ul اصلی با استفاده از کد ;display: none پنهان می سازیم (کاری که این کد انجام می دهد این است که آن بخش از کدهای اچ تی ام ال که این کد به آن اختصاص داده شده است را به طور موقت پنهان می سازد. حال چنانچه بخواهیم این کدها را نمایان سازیم، می بایست مقدار Property مرتبط با display را برای زمانیکه نشانگر موس روی آن منو قرار می گیرد (به عبارتی زمانیکه که hover می کنیم) برابر با block گردد. علامت > به عنوان انتخاب کننده زیر مجموعه های کد برای ما این اطمینان را حاصل می کند که فقط کدهای li مورد هدف کدهای CSS ما است نه همه زیر مجموعه های آن.

nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
}

;position:relative به ما این امکان را می دهد تا موقعیت منوهای فرعی را با توجه به نوار منوی اصلی تنظیم کنیم و کد ;display:inline-table پهنای منو را با توجه به مانیتور کوچک می کند.

nav ul li {
    float: left;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
    color: #fff;
}
nav ul li a { 
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}

حالا شروع به طراحی دکمه ها می کنیم. برای این کار کدها را باید به تگ li نسبت دهیم. خروجی این کد، لینک ها را به صورت گرادیانت آبی رنگ با رنگ متن سفید در می آورد.

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
nav ul ul li a:hover {
    background: #4b545f;
}

حال نوار اصلی منو به صورت کامل طراحی شده است اما زیر گروه های منو ها هنوز نیاز به کار دارند. در حال حاضر آنها طرح خود را از طرح منوی اصلی به ارث می برند بنابراین تغییر گرادیانت و حذف border-radius و ثابت کردن padding آن ها منو را تکمیل خواهد کرد. برای اینکه مطمئن شویم آنها از زیر منوی اصلی خارج نخواهند شد باید مکان آن 100% در بالای ul قرار گیرد. گزینه ها نباید کنار هم دیگر قرار گیرند در عوض آنها باید به صورت عمودی با Border یی نازک جدا شوند.

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

مرحله آخر تنظیم موقعیت زیر مجموعه های زیر مجموعه ها است. آنها تمامی خصوصیات زیر مجموعه را به ارث می برند بنابرین نیاز است تا کاملا به سمت راست منتقل شوند (left:100%). منوی کامل CSS حال منوی آبشاری آماده شده است و شما می توانید با سلیقه خود آن را شخصی سازی کنید.

چگونه با سی اس اس یک منوی آبشاری درست کنیم

0


بهزاد مرادی

از جمله علائق بهزاد مرادی می توان به نشر علم،‌ سرمایه گذاری روی نسل آینده، زبان برنامه نویسی پی اچ پی و جامعه متن باز و همچنین راه اندازی استارتاپ و کارآفرینی اشاره کرد و او بر این باور است که سکان آکادمی بستری است که از آن طریق می تواند به علائق اش جامه ی عمل بپوشاند. از جمله فعالیت های وی در سکان آکامی می توان به تالیف دوره های آنلاین برنامه نویسی و ترجمه مقالات وبلاگ اشاره کرد. 






  • هیراد در تاریخ: 1395/11/03

    .nav ul::after {
    content: "";
    clear: both;
    display: block;
    }
    سلام خدمت جناب مرادی ، میشه این کد بالا رو توضیح بدید ؟ این کد رو خیلی جاها دیدم ولی منظورشو درک نکردم..
    نمونش این لینک : http://s5.picofile.com/file/8283450234/CSS.png
    ممنون

از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)