آموزش فریم‌ورک Foundation-بخش۵-سفارشی‌سازی منو

آموزش فریم‌ورک Foundation-بخش۵-سفارشی‌سازی منو

بخش پنجم: سفارشی سازی منوی بالا (Top Bar Customization)

سفارشی سازی منوی بالا (Top Bar Customization)

 

سفارشی‌سازی منوی بالا در فریم‌ورک فاندیشن

 

در مقاله قبل، نحوه پیاده‌سازی نوار بالا (TOP BAR) آموزش داده شد. در این مقاله می خواهیم چگونگی سفارشی سازی این المان مهم را آموزش دهیم.

فریم ورک فاندیشن، امکانات و ویژگی های خوبی برای بخش منوی بالا (Top Bar) در نظر گرفته است و شاخصه مهم رابط کاربری وب سایت هایی است که با این فریم ورک طراحی شده اند. در این سری مقالات، قصد داریم روش سفارشی سازی متفاوتی را برای این المان مطرح کنیم و بتوانید آن در هرجای صفحه وب که در نظر دارید، قرار دهید.

 

شروع سفارشی سازی منوی بالا (Getting started):

اول از همه، ما نیاز به آخرین نسخه فریم ورک foundation داریم. پس با مراجعه به مقاله ای که درباره نحوه دانلود فرم ورک فاندیشن بود، و یا مراجعه به بخش دانلود وب سایت فریم ورک فاندیشن، آنرا طبق نیازهای خود دانلود کرده و فایل زیپ (zip) دریافتی را از حالت زیپ خارج کنید (unzip یا extract). ما در این بخش فقط با فایل index.html سروکار داریم. می خواهیم استایل های دلخواه و موردنیاز خود را در style.css تعریف کنیم تا روی استایل های پیش فرض تعریف شده برای نوار بالا (Top Bar) بنشیند و بقول معروف کلاس ما روی کلاس های قبلی، override شود.

لطفا تصویر پس زمینه (background) منوی افقی سفارشی را دانلود کرده و در فولدری بنام img قرار دهید. (اگر فولدر img وجود ندارد، آنرا ایجاد کنید)

 

تنظیمات ساختار کدهای HTML:

 

قدم اول: نشانه گذاری کلی (General Markup):

فایل index.html شامل یک سری کدهای HTML می باشد. اسکریپت ها و استایل های موجود در تگ هدر head tag را بدون هیچ تغییری به حال خود رها کنید. فقط باید مطمئن شویم که کدهای top bar بدرستی کار می کنند.

شما می توانید بقیه کدهای واقع در تگ body را پاک کنید تا کدهای مربوط به نوار بالا را در آنجا تعریف کنیم. طراحی موردنظر ما بصورت تمام صفحه (full width) و ساده می باشد و پیچیده نیست.

ما در این قالب به ۴ بخش اصلی هدر (header)، منو (navigation)، محتوا (content) و فوتر (footer) نیاز داریم و هر بخش را با متون تستی پر می کنیم. به هر بخش (area) یک کلاس full-width اختصاص می دهیم. در داخل هر یک از این area ها یک div با کلاس row تعریف می کنیم. سپس در این row یک div دیگر با کلاس های large-12 و columns باید تعریف کنیم تا سیستم گرید (Grid system) فریم ورک فاندیشن را بطور کامل اجرا کرده باشیم.

کدهای html زیر را در نظر بگیرید:

 

<!– HEADER AREA –>

<header class="full-width header-area">

    <div class="row">

        <div class="large-12 columns">

            <h2>Foundation-4 Custom Top Bar</h2>

        </div>

    </div>

</header>

<!– NAVIGATION AREA –>

<div class="full-width navigation-area">

    <div class="row">

        <div class="large-12 columns">

            <nav class="top-bar"></nav>

        </div>

    </div>

</div>

<!– CONTENT AREA –>

<div class="full-width content-area">

    <div class="row">

        <div class="large-12 columns">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>

        </div>

    </div>

</div>

<!– FOOTER AREA –>

<div class="full-width footer-area">

    <div class="row">

        <div class="large-12 columns">

            &copy; 2013

        </div>

    </div>

</div>

قدم دوم: نشانه‌گذاری نوار بالا (Top bar markup):

پیش از اینکه وارد مبحث استایل‌دهی و css منوی بالا شویم، باید ساختار html آن را تعریف کنیم تا منو بتواند بدرستی کار کند. برای پیاده سازی منوی فریم ورک فاندیشن، به ۵ المان اصلی نیازمندیم:

  • nav with class="top-bar"
  • ul with class="title-area"
  • li with class="toggle-topbar" = to expand the menu in mobile layout
  • section with class="top-bar-section"
  • ul with class="left" and ul with class="right"

 

اکنون نوبت آنست که این ۵ المان اساسی منو را پیاده‌سازی کنیم:

نکته: در این مقاله آموزشی، ما می خواهیم نحوه طراحی و پیاده سازی یک منوی سفارشی (custom navigation menu) را آموزش دهیم. یکی از مواردی که می خواهیم سفارشی سازی کنیم، بخش مربوط به لوگو در منو می باشد. در این مثال قصد داریم لوگو (متن یا عکس) را از منو حذف کنیم. بدین منظور، باید داخل المان li با کلاس name چیزی ننویسیم و آنرا خالی رها کنیم. این li در ul با کلاس title-area قرار دارد.

اکنون بیایید چند آیتم و زیرمنو به منوی خود اضافه کنیم. برای تعریف یک li که زیرمنو دارد، کافیست کلاس has-dropdown را برای آن تعریف کنیم. سپس در این li یک ul با کلاس dropdown تعریف می کنیم. برای مشخص کردن آیتم فعال و جاری باید class=”active” را برای آن li تعریف کنیم. در این مثال، ul با کلاس right را خالی رها می کنیم. بطور معمول از این قسمت برای نمایش باکس جستجو در منوی اصلی استفاده می شود.

 

کد زیر را در این زمینه مشاهده نمائید:

<!– Nav Wrap –>

<nav class="top-bar">

    <ul class="title-area">

        <!– Title Area –>

        <li class="name"></li>

        <!– Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone –>

        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

    </ul>

    <!– The Section wrap –>

    <section class="top-bar-section">

        <!– Left Nav Section –>

        <ul class="left">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">About us</a></li>

            <li><a href="#">Our products</a></li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Blog</a></li>

            <li><a href="#">Prices</a></li>

            <li class="has-dropdown">

                <a href="#">Features</a>

                <ul class="dropdown">

                    <li><a href="#">Modalboxes</a></li>

                    <li><a href="#">Submenu's and navigation</a></li>

                    <li><a href="#">Price tables</a></li>

                    <li><a href="#">Buttons</a></li>

                    <li><a href="#">Button groups</a></li>

                    <li><a href="#">Labels, Keystrokes and Tooltips</a></li>

                    <li><a href="#">Alert boxes</a></li>

                    <li><a href="#">Columns</a></li>

                </ul>

            </li>

            <li><a href="#">Contact</a></li>

        </ul>

        <!– Right Nav Section –>

        <ul class="right"></ul>

    </section>

</nav>

 

قدم سوم: مشاهده نتیجه:

اکنون وقت آنست که منوی ایجاد شده را در مرورگر سیستم خود مشاهده نمائید. تا بدین جا توانسته‌ایم یک منوی افقی (horizontal navigation) را با ساختار اولیه و ساده پیاده سازی کنیم. در صورتی که می خواهید منوی بالا را در جای دیگری غیر از بالای مرورگرتان نمایش دهید، فقط کافیست المان nav با کلاس top-bar را در یک div با کلاس row و div با کلاس columns تعریف کنید.

وقتی اندازه صفحه مرورگرتان را کوچک می کنید، نحوه نمایش منو در نقاط شکست پیش فرض (break point) تغییر خواهد کرد.

 

نوار بالا در فریم ورک فاندیشن

 

قدم بعدی استایل دهی به منوی بالا می باشد. در بخش بعدی، با نحوه تعریف استایل های لازم برای این المان آشنا می شویم.

 

 

انجام تنظیمات CSS منو:

 

قدم اول: استایل‌دهی کلی (General Styling):

اگر تاکنون فایل css مجزایی نساخته اید، یک فایل بنام style.css ایجاد کرده و آنرا در فولدر css فریم ورک فاندیشن قرار دهید. فراموش نکنید آنرا در تگ head صفحات وب سایت خود تعریف (include) کنید. مانند کدهای زیر، آنرا در زیر تعریف foundation.css قرار دهید:

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title>Foundation 4</title>

    <link rel="stylesheet" href="css/foundation.css">

    <link rel="stylesheet" href="css/style.css">

    <script src="js/vendor/custom.modernizr.js"></script>

</head>

اگر فایل style.css خود را در پایین Foundation.css تعریف نکنید، استایل های تعریف شده توسط شما بر روی استایل های پیش فرض فاندیشن override نخواهد شد.

بسیار خب، اکنون اگر موافق باشید یک سری استایل به ۴ بخش هدر، منو، محتوا و فوتر بدهیم. برای منوی اصلی سایت از یک تصویر بک گراند استفاده می کنیم که قبلا این عکس را دانلود کرده ایم. برای هر بخش کلاس full-width را تعریف کرده ایم تا مطمئن شویم تمام بخش ها و المان های وب سایت مان بصورت تمام صفحه در تمام مرورگرها نمایش می یابد.

استایل های زیر را در نظر بگیرید:

body {

    background-color: #ccc;

}

/** Set the backgrounds for the different sections **/

.header-area {

    background-color: #2d465c;

    min-height: 160px;

}

.navigation-area {

    background-image: url('../img/navigation-container.jpg');

    background-repeat: repeat-x;

}

.content-area {

    padding: 50px 0 70px 0;

}

.footer-area {

    background-color: #1f1f1f; 

    color: #fff;

    min-height: 50px;

    padding: 20px 0 0 0;

}

.full-width {

    min-width:100%;

    position: relative;

}

h2 {

    color: #fff;

    font-weight: normal;

    margin-top: 50px;

}

 

قدم دوم: استایل‌های منوی بالا (Top bar styles):

اگر الان منو را در مرورگر مشاهده کنید، کمی بهم ریخته می باشد. به این دلیل می باشد که منو هنوز استایل های پیش فرض foundation را لود می کند. تعدادی کلاس وجود دارد که باید برای استایل‌دادن به منوی اصلی override شوند و مجددا تعریف گردند. ابتدا رنگ بک گراند پیش فرض منو (.top-bar) را تغییر می دهیم. سپس Height و line-height منو (.top-bar) را به ۵۸px آپدیت می کنیم. در استایل های زیر، کامنت ها را برای اطلاعات بیشتر بخوانید:

/** Changes background color, height and margin of the border **/

.top-bar {

    background: none;

    height: 58px;

    line-height: 58px;

    margin-bottom: 0;

}

/** Removes black background on menu bar **/

.top-bar-section ul {

    background: none;

    text-transform: uppercase;

}

/** Removes black background on menu item **/

.top-bar-section li a:not(.button) {

    background: none;

    line-height: 58px;

    padding: 0 27px;

}

 

رنگ پس زمینه مشکی پیش فرض را حذف کردیم (توسط background:none) ارتفاع و ارتفاع بین خطوط (height and line-height) مربوط به top-bar را به ۵۸ پیکسل تغییر دادیم و بک گراند ul را نیز حذف کردیم و حروف آن را به بزرگ تغییر دادیم (uppercase). اکنون اگر مرورگر خود را رفرش کنید، تغییرات اعمال شده اند.

در مرحله بعد می خواهیم آیتم های دارای زیرمنو (dropdown) را استایل دهی کنیم. آیتم های منو (menu item) آیتم فعال (active item) و وضعیت hover منو. استایل های زیر را در این زمینه در نظر بگیرید. لطفا به کامنت های مربوط به هر کلاس دقت کنید:

/** Changes the active menu item from default black to a gradient **/

.top-bar-section ul li.active > a {

    background:  rgb(0, 0, 0);

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;

    color: #fff;

}

/** Changes the hover state of non active menu items **/

.top-bar-section li:hover a {

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;

    color: #fff;

}

/** Changes non active menu items text color to black **/

.top-bar-section ul li > a {

    color: #2d2d2d;

}

/** Changes the hover state of dropdown menu items **/

.top-bar-section ul.dropdown li a:hover:not(.button) {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);

}

/** IMPORTANT fill for the ul dropdown container **/

.top-bar-section ul.dropdown {

    background: #333;

    color: #fff;

}

/** This fixes the position and the color of the dropdown arrow **/

.top-bar-section .has-dropdown > a:after {

    border-color: rgba(0, 0, 0, 1) transparent transparent;

    margin-top: 2.5px;

}

 

توسط استایل های فوق، تغییرات زیادی را در منوی بالا اعمال کرده ایم. در ابتدا، رنگ بک گراند پیش فرض آیتم فعال (active) را حذف کردیم و سپس آنرا به رنگ گرادینت css جایگزین کردیم (linear-gradient)

سپس برای وضعیت hover آیتم های منو، یک رنگ گرادینت دیگری تعریف کرده ایم. برای مشخص‌تر شدن تکست آیتم های غیر‌فعال (non-active) در منو، رنگ آنرا خاکستری تیره درنظر گرفتیم.

هنگامیکه با ماوس بر روی یک منوی دارای زیرمنو (has-dropdown) می رویم، با تعریف کلاس .top-bar-section li:hover می توان رنگ پس زمینه و نیز رنگ متن آن منوی والد را تغییر دهیم تا مشخص شود آیتم فعال در منو کدام آیتم می باشد.

 

قدم سوم: مشاهده نتیجه:

مرورگر خود را رفرش کنید تا استایل هایی که اکنون تعریف کرده اید، روی منو اعمال شوند و نتیجه کارتان را ببینید. کارمان هنوز تمام نشده است. باید مطمئن شویم با کوچک کردن مرورگر (برای تست دستگاه های کوچک تر مانند موبایل) منو بهم نمی ریزد و ریسپانسیو می باشد. بدین منظور باید از قابلیت مدیا کوئری (media query) در CSS استفاده کنیم.

 

 

تنظیمات مدیا کوئری (Setting up the Media Query):

 

قدم اول: مدیا کوئری (Media Query):

در دیزاین سفارشی خود یک سری کارها را باید انجام دهیم تا منو در اسکرین های کوچکتر نیز بدرستی نمایش یابد. این تغییرات معمولا شامل تغییر رنگ متن، رنگ پس زمینه، padding آیتم ها و line-height می باشد. به کدهای css  زیر بهمراه کامنت های هریک از کلاس ها دقت کنید:

 

@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */

    .top-bar ul {

        background-color: rgba(0, 0, 0, 0.5);

        padding-bottom: 13px;

    }

    /* Change non active menu item color to black */

    .top-bar-section ul li > a {

        color: #fff;

    }

    /* Gives the dropdown ul a black fill */

    .top-bar-section ul {

        background: #000;

    }

    /* Give the BACK button after going in a submenu the appropriate filling */

    .top-bar-section .dropdown li.title h5 a {

        line-height: 57px;

    }

    /* This fixes the position and the color of the dropdown arrow */

    .top-bar-section .has-dropdown > a:after {

        border-color: rgba(255, 255, 255, 1) transparent transparent;

        margin-top: 2.5px;

    }

} /* end media query */

 

قدم دوم: از نتیجه لذت ببرید:

پس از تعریف استایل های فوق، فایل style.css را ذخیره کرده و نتیجه را در مرورگر مشاهده کنید. همانطور که مشاهده می کنید منوی افقی که طراحی کرده اید ریسپانسیو می باشد و در تمام سایزهای مختلف بدرستی کار می کند.

 

منوی ریسپانسیو فاندیشن

 

نتیجه‌گیری (Conclusion):

دقت داشته باشید که لزومی ندارد منوی سایت حتما در بالای سایت قرار بگیرد. بلکه در هر جا که بخواهید می توانید آنرا نمایش دهید. فقط کافیست در div های row و columns تعریف شود.

فریم ورک foundation یک چارچوب قدرتمند و منعطف می باشد که توسط آن می توانید قالب های زیبا و ریسپانسیو را براحتی طراحی کنید. هراندازه که در سفارشی سازی این فریم ورک بیشتر تلاش کنید، قالب های زیباتر و منحصربفردتری می توانید ایجاد کنید.

در مقاله بعد (بخش ششم از سری آموزشی فریم ورک foundation)، درباره دکمه (button) و لیست بازشو (dropdown list) صحبت می کنیم.

 

منبع: https://webdesign.tutsplus.com/articles/how-to-customize-the-foundation-4-top-bar–webdesign-14675


برچسب‌ها:

Navigationtop barسفارشی سازی نوار بالاشخصی سازی MENUشخصی سازی منومنونوار بالا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 × 1 =