() translation by (you can also view the original English article)
هناك اتجاه شائع جدًا في هذه الأيام هو استخدام التنقل الثابت ، والذي يتقلص ليصبح أقل تطفلاً أثناء تمرير المستخدم لأسفل الصفحة. في هذا البرنامج التعليمي ، سأوضح لك كيف يمكنك تحقيق ذلك عن طريق استخدام ZURB Foundation Top Bar و css و jQuery . لإكمالها ، سنضيف استعلامات وسائط متعددة لجعل قائمتنا سريعة الاستجابة. هيا بنا نبدأ
المستلزمات :
ستحتاج إلى شيئين للحصول على قبضتك الجيدة على هذا البرنامج التعليمي:
- الفهم الأساسي ل Foundation Topbar
- الفهم الأساسي للمؤسسة و The Grid System
- معرفة العمل مع ساس والبوصلة
- تجربة صغيرة في استخدام jQuery لبعض التعامل مع الأحداث
هيا بنا
أولاً ، سنقوم بإعداد بيئة العمل الخاصة بنا. إذا كنت لا تعرف كيفية القيام بذلك باستخدام Compass و Sass ، فراجع قسم "Getting Started" (بدء التشغيل) في "إنشاء شريط أعلى شريط خارج الملاحي" مع Foundation 5.
قم بإنشاء مشروع التأسيس الجديد واستخدم ساعة البوصلة لتجميع مشروعك. سنقوم بإنشاء style.scss الخاصة بنا في مجلد scss لتخصيصاتنا وبعض التصميم العام. مع هذا الإعداد ، سنغوص في بنية HTML العامة ، دعنا نذهب!
إعداد بنية HTML
الخطوة 1: الترميز العام
بعد أن بدأت مشروعًا جديدًا للمؤسسة ، انتقل إلى ملف index.html وابدأ بإزالة كل المحتوى بين علامات النص ، باستثناء النصوص قبل علامة النص الختامي مباشرةً. ثم أضف السطر التالي إلى Head ، لاستيراد style.css.
1 |
<link rel="stylesheet" href="stylesheets/style.css" /> |
بعد ذلك ، سنضيف بعض الترميز ، مثل الرأس ، والقسم الرئيسي والتذييل ، وسنضيف أيضًا بعض المحتوى الوهمي لإضفاء بعض الملء على صفحتنا.
1 |
<!-- HEADER SECTION -->
|
2 |
<div class="contain-to-grid header-section"> |
3 |
|
4 |
<!-- TOPBAR SECTION -->
|
5 |
<nav class="top-bar important-class" data-topbar> |
6 |
|
7 |
</nav> <!-- END TOPBAR SECTION --> |
8 |
</div> <!-- END HEADER SECTION |
9 |
|
10 |
<!-- CONTENT FILL WHEN SCROLL = 0 -->
|
11 |
<div class="header-fill"></div> |
12 |
|
13 |
<!-- CONTENT SECTION -->
|
14 |
<div class="row content-section"> |
15 |
<div class="main-content"> |
16 |
<div class="small-12 medium-12 large-12 columns"> |
17 |
<h1>Fancy Foundation Top Bar</h1> |
18 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
19 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
20 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
21 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p> |
22 |
</div>
|
23 |
</div>
|
24 |
</div> <!-- END CONTENT SECTION --> |
25 |
|
26 |
<!-- FOOTER SECTION -->
|
27 |
<div class="footer-section"> |
28 |
<div class="row"> |
29 |
<div class="small-12 medium-12 large-12 columns"> |
30 |
<p>© Copyright 2014</p> |
31 |
</div>
|
32 |
</div>
|
33 |
</div> <!-- END FOOTER SECTION --> |
هنا قمنا بإنشاء قسم رأس ، بما في ذلك nav ، قسم المحتوى وقسم تذييل. هناك أمران يجب ملاحظتهما:
-
navلديها قسم، .important-classوالتي سنستخدمها لإخبار jQuery عن العنصر الذي يجب استهدافه عندما ننتقل إلى الأسفل. - لقد قمنا بتضمين div مع تصنيف
header-fill. سنستخدم هذا لوضع بعض المساحة بين أعلى المتصفح وقسم المحتوى ، حيث سيتم إصلاح رأس الصفحة ولديه فهرس z أعلى ثم باقي العناصر في الصفحة.
الخطوة 2: أعلى شريط العلامات
بعد ذلك ، سنكتب HTML ل Top Bar. نحن بحاجة إلى منطقة عنوان لشعارنا مع ul وقسم مع لتخزين عناصر القائمة لدينا. ألقِ نظرة على HTML التالي:
1 |
<!-- TOPBAR SECTION -->
|
2 |
<nav class="top-bar important-class" data-topbar> |
3 |
|
4 |
<!-- TITLE AREA & LOGO -->
|
5 |
<ul class="title-area"> |
6 |
<li class="name"> |
7 |
<img src="img/Acme_Colour.png" alt="" id="logo-image"> |
8 |
</li>
|
9 |
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> |
10 |
</ul> <!-- END TITLE AREA & LOGO --> |
11 |
|
12 |
<!-- MENU ITEMS -->
|
13 |
<section class="top-bar-section"> |
14 |
<ul class="right"> |
15 |
<li class="active"><a href="index.php">Home</a></li> |
16 |
<li><a href="blog.php">Blog</a></li> |
17 |
<li><a href="#">About us</a></li> |
18 |
<li><a href="#">Portfolio</a></li> |
19 |
<li class="has-dropdown"> |
20 |
<a href="#">Services</a> |
21 |
<ul class="dropdown"> |
22 |
<li><a href="#">Service #1</a></li> |
23 |
<li><a href="#">Service #2</a></li> |
24 |
<li><a href="#">Service #3</a></li> |
25 |
</ul>
|
26 |
</li>
|
27 |
<li><a href="#">Contact</a></li> |
28 |
</ul>
|
29 |
</section> <!-- END MENU ITEMS --> |
30 |
</nav> <!-- END TOPBAR SECTION --> |
لقد أضفنا ul مع فئة title-area حيث نحتفظ بشعارنا. بعد ذلك ، لدينا section مع فئة من القسم top-bar-section ومعul .right ، الذي يحتوي على جميع عناصر القائمة. تحتوي صورتنا على logo-image والتي سنحتاجها أيضًا في jQuery لاحقًا في هذا البرنامج التعليمي.
الخطوة 3: النتائج حتى الآن
إذا فتحنا متصفحنا وانتقلنا إلى ملف الفهرس الخاص بنا ، فسوف نجد أن التصميم الأساسي للمؤسسة يقوم بالكثير من العمل بالنسبة لنا ، لجعل الأمور تبدو لطيفة. شعارنا لا يزال غير مناسب. في الخطوة التالية ، سنقوم بإصلاح هذا الأمر ونمنح عنوان الملاحة الخاص بنا بعض التصميم المناسب.
إنشاء Sass
للحصول على النتائج التي نرغب بها ، سنحتاج إلى بعض التصميم الأساسي لأقسامنا ، وخاصةً العنوان وقسم Top Bar. سوف نستخدم ساس لتحقيق ذلك.
الخطوة 1: التصميم العام
للبدء ، سنقوم بإعطاء جميع أقسامنا بعض التصميم الأساسي. نلقي نظرة على Sass أدناه:
1 |
$primary-color: #ef4523; |
2 |
|
3 |
/*
|
4 |
HEADER SECTION
|
5 |
========================================================================== */
|
6 |
.header-section { |
7 |
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); |
8 |
box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); |
9 |
position: fixed; |
10 |
z-index: 999; |
11 |
min-width: 100%; |
12 |
}
|
13 |
|
14 |
.contain-to-grid { |
15 |
background-color: rgba(255, 255, 255, 0.97); |
16 |
}
|
17 |
|
18 |
// FILL USED FOR HEADER |
19 |
.header-fill { |
20 |
background: #fff; |
21 |
height: 135px; |
22 |
.tablet-mobile-logo img { |
23 |
padding-top: 30px; |
24 |
}
|
25 |
}
|
26 |
|
27 |
// USED FOR JQUERY ACTION |
28 |
.padding-on-my-header { |
29 |
padding: 17px 0.9375rem 62px 0.9375rem; |
30 |
ul.title-area img { |
31 |
margin: -5px 0 0 0; |
32 |
}
|
33 |
}
|
34 |
|
35 |
.full-width { |
36 |
min-width: 100%; |
37 |
}
|
38 |
|
39 |
p { |
40 |
line-height: 3rem; |
41 |
padding-bottom: 30px; |
42 |
}
|
43 |
|
44 |
|
45 |
/*
|
46 |
CONTENT SECTION
|
47 |
========================================================================== */
|
48 |
|
49 |
|
50 |
.content-section { |
51 |
.main-content { |
52 |
margin-top: 35px; |
53 |
}
|
54 |
}
|
55 |
|
56 |
|
57 |
/*
|
58 |
FOOTER SECTION
|
59 |
========================================================================== */
|
60 |
|
61 |
.footer-section { |
62 |
background: #333; |
63 |
min-height: 100px; |
64 |
p { |
65 |
color: #fff; |
66 |
margin-top: 50px; |
67 |
}
|
68 |
}
|
نحن نستخدم متغير اللون الأساسي هنا ، والذي سنستخدمه لبعض من تصميم Top Bar. لدينا القسم رأس ديه لطيفة، خفية مربع الظل، بحيث يبدو في الواقع وكأنه عائم فوق ما تبقى من المحتوى. من خلال تعيين موضعها على الوضع الثابت وجعل الرقم القياسي z: 999 ، نتأكد من أن التنقل يلتصق بأعلى المستعرض عند التمرير لأسفل وأنه يظل فوق كل العناصر الأخرى في الصفحة.
contain-to-grid فئة لديها اللون الأبيض الشفاف خفية، حتى أننا عندما انتقل، يبدو كما لو كان يتحرك الرأس على رأس كل العناصر الأخرى. ما زلنا بحاجة إلى إصلاح هذه القائمة ، لذلك دعونا نعتني بذلك بعد ذلك.
الخطوة 2: تصميم Topbar
الآن ، سوف نقوم بإضافة التصميم لإضفاء مظهر جميل وأنيق على Top Bar. يمكنك أيضًا ضبط بعض إعدادات الشريط العلوي في _settings.scss ، ولكن سأوضح لك كيفية إجراء ذلك باستخدام عمليات التخصيص المخصصة الخاصة بنا. يفسر sass أدناه ما يحدث في الحالات التالية:
1 |
/*
|
2 |
TOPBAR NAVGATION
|
3 |
========================================================================== */
|
4 |
.top-bar
|
5 |
{
|
6 |
background: none; |
7 |
padding: 45px 0.9375rem 90px 0.9375rem; |
8 |
transition: all 0.5s ease 0.1s; |
9 |
// LOGO ADJUSTMENT |
10 |
ul.title-area img { |
11 |
margin: -10px 0 0 0; |
12 |
}
|
13 |
.top-bar-section ul { |
14 |
background: none; |
15 |
// MENU ITEM STYLES |
16 |
li a:not(.button), li.active a:not(.button) { |
17 |
background: none; |
18 |
line-height: 30px; |
19 |
font-size: 12px; |
20 |
padding: 0; |
21 |
margin: 5px 0 0 0; |
22 |
text-transform: uppercase; |
23 |
}
|
24 |
// MENU ITEM HOVERS |
25 |
li a:not(.button):hover { |
26 |
background: none; |
27 |
border-bottom: 2px solid $primary-color; |
28 |
color: #222; |
29 |
}
|
30 |
// MENU ITEM ACTIVE |
31 |
li.active a:not(.button) { |
32 |
border-bottom: 2px solid $primary-color; |
33 |
color: #222; |
34 |
&:hover { |
35 |
background: none; |
36 |
}
|
37 |
}
|
38 |
li { |
39 |
margin-left: 30px; |
40 |
a { |
41 |
color: #888; |
42 |
}
|
43 |
}
|
44 |
}
|
45 |
// DROPDOWN MENU |
46 |
.top-bar-section ul li:hover:not(.has-form) > a { |
47 |
color: #333; |
48 |
}
|
49 |
.top-bar-section li ul.dropdown { |
50 |
background: #fff; |
51 |
border: 1px solid #ddd; |
52 |
color: #888; |
53 |
li { |
54 |
border-bottom: 1px solid #ddd; |
55 |
margin: 0; |
56 |
padding: 5px 15px 5px 15px; |
57 |
}
|
58 |
}
|
59 |
.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) { |
60 |
background: none; |
61 |
color: #222; |
62 |
border-bottom: none; |
63 |
padding: 20px -4px 40px 45px; |
64 |
}
|
65 |
.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) { |
66 |
background: none; |
67 |
color: #222; |
68 |
}
|
69 |
// DROPDOWN ARROW |
70 |
.has-dropdown > a:after { |
71 |
border-color: rgba(0, 0, 0, 0.5) transparent transparent; |
72 |
margin-top: -5px; |
73 |
}
|
74 |
}
|
ملاحظة: ونحن في طريقنا لتحريك padding-on-my-header الطبقة تحت قواعد شريط الأعلى. يعد هذا ضروريًا لتجاوز المساحة الموجودة في الشريط العلوي.
لقد أضفنا بعض الحشو إلى شريطنا العلوي وقمنا بضبط انتقال 0.5s ، تخفيف 0.1s. سيوفر ذلك تأثير انتقال سلس عند بدء تشغيل jQuery. تم تعيين الخلفية على لا شيء ، بحيث يحتوي رأس الصفحة على اللون الشفاف قليلاً الذي قدمناه إلى .contain-to-grid الفئة : الباقي هو بعض التصميم الأساسي لعناصر القائمة شريط الأعلى ، المنسدلة ، تحوم والحالات النشطة. لا شيء مبالغ فيه ، لكنه أعطانا نتيجة نظيفة عن طريق إضافة بعض الحشو والمساحة البيضاء.
الخطوة 3: النتائج حتى الآن
دعونا نلقي نظرة على ما لدينا حتى الآن. من المؤكد أنها بدأت تبدو وكأنها شيء! ومع ذلك ، لا تزال القائمة كبيرة قليلاً عند التمرير لأسفل الصفحة. هذا هو المكان .padding-on-my_header خطوات الفصل
تأثير jQuery
دعونا نستخدم القليل من السحر jQuery لإضافة .padding-on-my_header الفصل على التمرير وتغيير الشعار إلى حجم أصغر.
الخطوة 1: إنشاء init.js
سنقوم بإنشاء ملف init.js لإدخال رمز jQuery الخاص بنا. ضعه في مجلد / js وقم بتضمين السطر التالي في أسفل ملف الفهرس ، قبل علامة النص الختامي مباشرةً ، لتضمين النص البرمجي:
1 |
<!-- JAVASCRIPTS -->
|
2 |
<script src="bower_components/jquery/dist/jquery.min.js"></script> |
3 |
<script src="bower_components/foundation/js/foundation.min.js"></script> |
4 |
<script src="js/app.js"></script> |
5 |
<!-- OUR JQUERY MAGIC -->
|
6 |
<script src="js/init.js"></script> |
7 |
</body>
|
8 |
</html>
|
سيتضمن init.js الخاص بنا ما يلي:
1 |
jQuery(window).scroll(function() { |
2 |
if (scroll >= 50) { |
3 |
$('#logo-image').attr('src', 'img/Acme_Monogram_Colour.png') |
4 |
$(".important-class").addClass("padding-on-my-header"); |
5 |
}
|
6 |
if (scroll < 50) { |
7 |
$(".important-class").removeClass("padding-on-my-header"); |
8 |
$('#logo-image').attr('src', 'img/Acme_Colour.png') |
9 |
}
|
10 |
});
|
دعونا ننظر إلى ما يحدث بالفعل هنا. عندما يتم تمرير المستخدم لأسفل ، نقوم بتنفيذ الوظيفة التالية: إذا قام المستخدم بتمرير أكثر من 50 بيكسل ، فسنجعل الشريط العلوي أصغر ويتم إدراج شعار بحجم أصغر:
- نجد شعار شعارنا واستبدلنا بمصدر الصورة مع شعارنا الأصغر.
- بعد ذلك ، نبحث عن .
important-classوإضافة فئة أخرى إليها: .padding-on-my-header
عندما نعود وننظر أسفل 50 بيكسل ، نقوم بالعكس ونقوم بإزالة طبقة الحشو ، مع إعادة شعار الشعار الكبير.
الخطوة 2: التحقق من النتائج
المضي قدما والرجوع إلى المتصفح. قم بتحديث الصفحة وحاول التمرير لأسفل. إذا سار كل شيء كما هو مخطط ، فيجب عليك الآن مشاهدة الشريط العلوي يتقلص مع انتقال سلس ويتم استبدال الشعار الكبير بالجزء الأصغر. جيدة جدا. ولكن عند تغيير حجم متصفحك ، سترى أنه غير مستجيب تمامًا حتى الآن. دعونا نعتنى بذلك!
استعلامات الوسائط لتحسين المحمول
سنقوم بإنشاء استعلام وسائط لأجهزة 1024 بكسل وأصغر. لكي نأخذ تأثيرها الصحيح ، نحتاج إلى تغيير نقطة توقف المؤسسة. كيف تقول؟ حسنا هذا سهل! سنتجول فقط في _settings.scss لدينا ونتطلع إلى الإعداد التالي:
1 |
// Media Query Ranges |
2 |
$small-range: (0em, 64em); |
3 |
$medium-range: (64em, 64em); |
4 |
$large-range: (64.063em, 90em); |
5 |
$xlarge-range: (90.063em, 120em); |
6 |
$xxlarge-range: (120.063em, 99999999em); |
كما ترى ، قمنا بنقل النطاق الصغير من 0em - 40em إلى 0em - 64em ، الذي يحسب إلى 1024 بكسل ؛ لدينا المدى المتوسط يبدأ الآن في 64em. احفظ إعداداتك لتصبح التغييرات سارية المفعول ودعنا نصل إلى استعلاماتنا الإعلامية!
الخطوة 1: إضافة استعلامات الوسائط
لا يلزم أن يكون الشريط العلوي على جهاز أصغر حجمًا كبيرًا. سنقوم بتقليصه قليلاً وإعادة وضع قائمتنا. سنستخدم أيضًا ملء رأس أصغر بكثير. ألقِ نظرة على الأنماط أدناه:
1 |
@media only screen and (max-width: 1024px) { |
2 |
|
3 |
.top-bar { |
4 |
margin-top: 0; |
5 |
padding: 0; |
6 |
float: none; |
7 |
// MENU BUTTON AND HAMBURGER ICON |
8 |
.toggle-topbar.menu-icon a { |
9 |
color: #222; |
10 |
&:after { |
11 |
box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; |
12 |
}
|
13 |
}
|
14 |
// LOGO |
15 |
ul.title-area img { |
16 |
margin: -2px 0 0; |
17 |
width: 145px; |
18 |
}
|
19 |
.top-bar-section { |
20 |
ul { |
21 |
background: #333; |
22 |
li { |
23 |
margin-left: 0; |
24 |
}
|
25 |
li > a { |
26 |
background: $primary-color; |
27 |
border-radius: 0; |
28 |
font-size: 0.9rem; |
29 |
}
|
30 |
// NORMAL BUTTONS |
31 |
li:not(.has-form) a:not(.button) { |
32 |
background: none; |
33 |
color: #fff; |
34 |
padding: 10px 15px; |
35 |
margin-top: 0; |
36 |
&:hover { |
37 |
background: $primary-color; |
38 |
color: #fff; |
39 |
margin-top: 0; |
40 |
}
|
41 |
}
|
42 |
// ACTIVE BUTTON |
43 |
li.active:not(.has-form) a:not(.button) { |
44 |
background: $primary-color; |
45 |
color: #fff; |
46 |
padding: 10px 15px; |
47 |
margin-top: 0; |
48 |
&:hover { |
49 |
background: lighten($primary-color, 5%); |
50 |
margin-top: 0; |
51 |
}
|
52 |
}
|
53 |
}
|
54 |
}
|
55 |
}
|
56 |
// SMALLER IMAGE |
57 |
.top-bar.padding-on-my-header ul.title-area img { |
58 |
margin: 5px 13px 0; |
59 |
width: 35px; |
60 |
}
|
61 |
// EXPANDED TOPBAR MENU |
62 |
.top-bar.expanded { |
63 |
margin-top: 0; |
64 |
padding: 0; |
65 |
float: none; |
66 |
.toggle-topbar.menu-icon a { |
67 |
color: #fff; |
68 |
&:after { |
69 |
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff; |
70 |
}
|
71 |
}
|
72 |
}
|
73 |
|
74 |
// SMALLER HEADER |
75 |
.header-fill { |
76 |
height: 40px; |
77 |
}
|
78 |
|
79 |
}
|
دعونا نلقي نظرة على ما قمنا به هنا:
- أزلنا جميع الحشو والهوامش في الشريط العلوي.
- أعطينا نص القائمة ورمز الهامبرغر لونًا رماديًا ، بدلاً من اللون الأبيض الافتراضي ، بحيث يكون مرئيًا على الشريط العلوي الأبيض.
- لقد أصلحنا شعارنا الأكبر ليلائم الشريط العلوي.
- في القسم
top-bar-section، نعمل على تصميم عناصر القائمة والاستجابة والحالات النشطة. - نقوم أيضًا بتغيير حجم الشعار الأصغر وتغيير موضعه.
- أزلنا بعض الحشوة والهوامش في قائمتنا المتجاوبة الموسعة.
- أخيرًا ، لقد قمنا بالتعبئة
header-fillأصغر ، بحيث تساوي ارتفاع شريط Top.
الخطوة 2: استمتع النتائج النهائية الخاصة بك!
عندما نعود إلى متصفحنا ونقوم بتغيير حجمه ، يمكننا الآن أن نرى أن تنقلنا سريع الاستجابة له تأثير كامل. مرر لأسفل وشاهد كيف تتغير صورة الشعار. انقر على رمز القائمة لمشاهدة الإصدار الموسع من نظام التنقل السريع الاستجابة.
الخلاصة :
مع بعض السحر Sass و jQuery ، تمكنا من تحويل الشريط الأساسي القوي والقوي من مؤسسة ZURB إلى رأس لاصق رائع ، عصري مع بعض التأثيرات السلسة. جاهز للاستخدام على مشاريعك الخاصة أو الخاصة بعملائك. استمتع !
المصادر
