الدرس الخامس: ناف بار متجاوب | دورة تصميم قالب بلوجر

هذا النافبار مقدم من موقع CodingNepal، هو موقع الكتروني يقدم نماذج ومشاريع صغيرة مميزة خاصة بواجهات المواقع، وهذا النموذج من الموقع، ندعوك لزيارته والاستفادة من الاكواد والنماذج الموجودة فيه

نقدم لكم في هذا الدرس أهم شيء في واجهة بلوجر، والذي يعاني منه الكثير عند تصميم المدونة وهو رأس المودنة او مايعرف بالهيدر بار، وهو الذي يحتوي على الروابط المهمة في المدونة، والمشكلة التي تواجه المصممين هي ناف بار متجاوب مع كل الاجهزة، فكثير من المستخدمين للمواقع يعملون على الاجهزة المتنقلة مثل السمارت فون، وعليه ينبغي مراعات التجاوب مع جميع الاحهزة، هذا النافبار متجاوب مع جميع الاجهزة.

<style> <![CDATA[ /*------header css-------*/ header {height: 70px;}.header *{text-decoration: none;}.header{ background: #171c24; position: fixed; width: 100%;z-index: 9; } .header nav{ position: relative; display: flex; max-width: calc(100% - 200px); margin: 0 auto; height: 70px; align-items: center; justify-content: space-between; } nav .content{ display: flex; align-items: center; } nav .content .links{ margin-right: 80px; display: flex; } .content .logo a{ color: #fff; font-size: 30px; font-weight: 600; } .content .links li{ list-style: none; line-height: 70px; } .content .links li a, .content .links li label{ color: #fff; font-size: 18px; font-weight: 500; padding: 9px 17px; border-radius: 5px; transition: all 0.3s ease; } .content .links li label{ display: none; } .content .links li a:hover, .content .links li label:hover{ background: #323c4e; } .header .search-icon, .header .menu-icon{ color: #fff; font-size: 18px; cursor: pointer; line-height: 70px; width: 70px; text-align: center; } .header .menu-icon{ display: none; } .header #show-search:checked ~ .search-icon i::before{ content: "\f00d"; } .header .search-box{ position: absolute; height: 100%; max-width: calc(100% - 50px); width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .header #show-search:checked ~ .search-box{ opacity: 1; pointer-events: auto; } .search-box input{ width: 100%; height: 100%; border: none; outline: none; font-size: 17px; color: #fff; background: #171c24; padding: 0 100px 0 15px; } .search-box input::placeholder{ color: #f2f2f2; } .search-box .go-icon{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); line-height: 60px; width: 70px; background: #171c24; border: none; outline: none; color: #fff; font-size: 20px; cursor: pointer; } .header input[type="checkbox"]{ display: none; } /* Dropdown Menu code start */ .content .links ul{ position: absolute; background: #171c24; top: 80px; z-index: -1; opacity: 0; visibility: hidden; } .content .links li:hover > ul{ top: 70px; opacity: 1; visibility: visible; transition: all 0.3s ease; } .content .links ul li a{ display: block; width: 100%; line-height: 30px; border-radius: 0px!important; } .content .links ul ul{ position: absolute; top: 0; left: calc(-100% + -30px); } .content .links ul li{ position: relative; } .content .links ul li:hover ul{ top: 0; } /* Responsive code start */ @media screen and (max-width: 1250px){ .header nav{ max-width: 100%; padding: 0 20px; } nav .content .links{ margin-right: 30px; } .content .links li a{ padding: 8px 13px; } .header .search-box{ max-width: calc(100% - 100px); } .header .search-box input{ padding: 0 100px 0 15px; } } @media screen and (max-width: 900px){ .header .menu-icon{ display: block; } .header #show-menu:checked ~ .menu-icon i::before{ content: "\f00d"; } nav .content .links{ display: block; position: fixed; background: #14181f; height: 100%; width: 100%; top: 70px; right: -100%; margin-right: 0; max-width: 350px; overflow-y: auto; padding-bottom: 100px; transition: all 0.3s ease; } nav #show-menu:checked ~ .content .links{ right: 0%; } .content .links li{ margin: 15px 20px; } .content .links li a, .content .links li label{ line-height: 40px; font-size: 20px; display: block; padding: 8px 18px; cursor: pointer; } .content .links li a.desktop-link{ display: none; } /* dropdown responsive code start */ .content .links ul, .content .links ul ul{ position: static; opacity: 1; visibility: visible; background: none; max-height: 0px; overflow: hidden; } .content .links #show-features:checked ~ ul, .content .links #show-services:checked ~ ul, .content .links #show-items:checked ~ ul{ max-height: 100vh; } .content .links ul li{ margin: 7px 20px; } .content .links ul li a{ font-size: 18px; line-height: 30px; border-radius: 5px!important; } } @media screen and (max-width: 400px){ .header nav{ padding: 0 10px; } .content .logo a{ font-size: 27px; } .header .search-box{ max-width: calc(100% - 70px); } .header .search-box .go-icon{ width: 30px; left: 0; } .header .search-box input{ padding-left: 30px; } } .dummy-text{ position: absolute; top: 50%; right: 50%; width: 100%; z-index: -1; padding: 0 20px; text-align: center; transform: translate(-50%, -50%); } .dummy-text h2{ font-size: 45px; margin: 5px 0; } ]]> </style> <nav> <input id='show-search' type='checkbox'/> <input id='show-menu' type='checkbox'/> <label class='menu-icon' for='show-menu'><i class='fas fa-bars'/></label> <div class='content'> <div class='logo'><a href='/'><img src='https://www.blogger.com/img/logo_blogger_40px.png' style='width: 40px;vertical-align: middle;margin-left: 6px;'/><span>اسم المدونة</span></a></div> <ul class='links'> <li><a href='#'>الرئسية</a></li> <li><a href='#'>من نحن</a></li> <li> <a class='desktop-link' href='#'>عنوان1</a> <input id='show-features' type='checkbox'/> <label for='show-features'>عنوان1</label> <ul> <li><a href='#'>قائمة منسدلة 1</a></li> <li><a href='#'>قائمة منسدلة 2</a></li> <li><a href='#'>قائمة منسدلة 3</a></li> <li><a href='#'>قائمة منسدلة 4</a></li> </ul> </li> <li> <a class='desktop-link' href='#'>عنوان2</a> <input id='show-services' type='checkbox'/> <label for='show-services'>عنوان2</label> <ul> <li><a href='#'>قائمة منسدلة 1</a></li> <li><a href='#'>قائمة منسدلة 2</a></li> <li><a href='#'>قائمة منسدلة 3</a></li> <li> <a class='desktop-link' href='#'>عناصر اخرى</a> <input id='show-items' type='checkbox'/> <label for='show-items'>عناصر اخرى</label> <ul> <li><a href='#'>قائمة منسدلة فرعية 1</a></li> <li><a href='#'>قائمة منسدلة فرعية 2</a></li> <li><a href='#'>قائمة منسدلة فرعية 3</a></li> </ul> </li> </ul> </li> <li><a href='#'>سياسة الخصوصية</a></li> </ul> </div> <label class='search-icon' for='show-search'><i class='fas fa-search'/></label> <form action='/search' class='search-box'> <input name='q' placeholder='ابحث...' required='' type='text'/> <button class='go-icon' type='submit'><i class='fas fa-search'/></button> </form> </nav>

© TechOucha

شارك على :

☷✎