Прозрачная навигация для сайта

Pirat 1.10.2018 Статьи 0 комментариев

Это адаптивное горизонтальное сменю, которое создано в прозрачном стиле, где оттенок цвета будет зависеть от фона на сайте с помощью CSS. Здесь идет четкая отсылка на дизайнерский прием, от которого много будет зависеть. Если подключить светлую гамму, что сделал, это проверяя навигацию на адаптивность и на работоспособность. То здесь все корректно выводит, и также оригинально все выглядит. Так как ниже у панели прописаны тени, что отлично вписываются именно под светлый формат.

Также ставил фоновую картинку, и на ней было неоднозначное мнение, так как она состоит из множества оттенков, то иногда фоновый снимок попадал под запросы и смешивался с ним. Что с уверенностью могу сказать, если вы ставите белый формат фона, то безусловно под него это сменю выстроено. Также нужно понимать, что некоторые веб разработчики создают отдельные страницы, где также будет отличным решением такую панель установить.

Тематического наклонение оно не имеет, его можно поставить под софт портал, также не исключаю, что под современный стиль дизайна его разрабатывали.

1. При открытии интернет портала или заход на страницу, то идет стандартный вид.

2. Вот уже на мобильном носителе, вы решили посетить ресурс, на котором такая навигация, то вид здесь аналогично понятный вид. Как можно увидеть, что остается логотип, а вот по центру выстраиваются в вертикальном виде запросы. Но и в самом углу по правой стороне появляется кнопка с надписью "меню" где при клике вы убираете запросы и аналогично открываете.

Приступаем к установке:

HTML

<body>
      <section>
        <header>
            <div class="logo">
		      <a href="#"><img src="https://secure.gravatar.com/avatar/fabdb283fe15708440314fae08b0e7a1?s=60&d=retro&r=g"></a>
            </div>
            <nav>
		    <ul>
			    <li><a href="#">Главная</a></li>
				<li><a href="#">Поиск</a></li>
				<li><a href="#">Услуги</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Фото</a></li>
				<li><a href="#">Правила</a></li>
			</ul>
            </nav>
            <div class="menu">
               <a href="#" class="menu-trigger">Меню</a>
            </div>
         </header>			
      </section>
    </body>

CSS

* {
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
  font-size: 100%;
  font-family: sans-serif;
}

section {
	height: 100vh;
	background: url(http://lediosa.by/assets/image-cache/939271.fd871516.jpg);
	background-size: cover;
	background-repeat: no-repeat;
    background-position: center center;
}

header {
	display: flex;
	justify-content: space-between;
    align-items: center;
	height: 17%;
	box-shadow: 0 7px 14px rgba(19, 18, 18, 0.22);	
}

.logo img {
   margin-left: 2.3em;
   max-width: 100%;
   height: auto !important;
}

 nav ul {
	display: flex;
    flex-flow: nowrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	transition: .5s;
    list-style-type: none;
}

ul li a {
    padding: 9px 18px;
    text-transform: uppercase;
    text-decoration: none;
    color: #2d2e2f;
    font-weight: bold;
    transition: .5s;
}

ul li a:hover {
	background: #0b3956;
	color: #f1f2f3;
    transition: .5s 
}

.menu-trigger {
    display:none;
    margin-right: 1.7em;
	background: #c15f7e;
    color: #f9f4f6;
    padding: 5px;
	cursor: pointer;
	font-weight: bold;
    text-decoration: none;
}

@media screen and (max-width:816px) {
	
     .menu-trigger {
    display:block;
  }
  
    header {
	display: flex;
	align-items: flex-start;
	height: 64%;
    }
  
    nav ul {
    display:block;
	}
	
	ul li {
    width: 50vh;	
	}
   
    ul li a {
        display: block;
		/* text-align: center; */
		color: #f9f4f4;
		background: rgba(23, 22, 22, 0.63);
        
	}
  
}

@media (max-width: 359px) {
	.logo img {
       margin-left: 0.1em;       
}    
}

$(document).ready(function() {
  $('.menu-trigger').click(function() {
    $('ul li').slideToggle(500);
  });//end slide toggle
  
  $(window).resize(function() {		
		if (  $(window).width() > 500 ) {			
			$('ul li').removeAttr('style');
		 }
	});//end resize
});//end ready

В самой стилистике у вас будет возможность прописать гамму, если вам не нужна прозрачная панель, где станет простым горизонтальным меню, под том оттенке, который поставите под свой дизайн.