Как можно сверстать данную часть панели навигации? И это не хедер

152

04 октября 2018, 04:50

Проблема в том, что я не понимаю как "Блог" разместить на одном уровне с остальными кнопками меню. Заранее прошу прощения за нубский вопрос.

html { 
  	font-size: 10px; 
} 
body { 
	background-color: #f2f2f2; 
    font-family: 'Futura PT'; /* Гарнитура шрифта */ 
    src: url(../fonts/Futura PT.ttf); /* Путь к файлу со шрифтом */ 
} 
*{ 
	padding: 0; 
	margin: 0; 
} 
ul{ 
	display: flex; 
}    
a{ 
	text-decoration: none; 
} 
header{ 
	height: 53px; 
	background: #ffffff; 
	padding: 10px 200px; 
} 
 
 
.top-slide{ 
	background: #ffffff; 
} 
.menu-container{ 
	height: 57px; 
	width: 1366px; 
	margin: 0 auto; 
	display: flex; 
	justify-content: baseline; 
} 
.menu-container a{ 
 	color: #686868; 
 	font-size: 16px; 
 	margin-right: 20px; 
 	padding: 24px 40px 14px 40px; 
} 
/*стилизация кнопок верхнего меню*/ 
.menu-container a:hover{ 
	background: #eeeeee; 
	/*padding: 25px 30px;*/ 
	height: 10px; 
	width: 90px; 
} 
#menu-checkbox{ 
	display: none; 
}

<main> 
		<section class="top-slide"> 
			<div><h2>Блог</h2></div> 
            <div class="menu-container"> 
			<input type="checkbox" id="menu-checkbox"> 
			<nav rove="navigation"> 
				<label for="menu-checkbox" class="toggle-button"  
				 data-open="Menu" data-close="Close" onclick></label> 
			 	<ul class="main-menu"> 
			 		<li><a href="#">Для бізнесу</a></li> 
			 		<li><a href="#">Для Юристів</a></li> 
			 		<li><a href="#">Підписатися на розсилку</a></li> 
				</ul> 
			</nav> 
		</div> 
		</section>	 
	</main>

Answer 1

флексы

* { 
  margin: 0;  
  padding: 0; 
} 
body { 
  font-family: sans-serif; 
} 
nav { 
  display:flex; 
  border-bottom:1px solid #ccc; 
} 
nav .nav-title { 
  color:#222; 
  font-weight: bold; 
  padding: 10px; 
} 
nav .navigation { 
  list-style: none; 
  display:flex; 
  color: gray; 
  flex-grow:1; 
} 
nav .navigation li { 
    padding: 10px; 
} 
nav .navigation li.selectable:hover { 
    box-shadow:0 -1px 0 0 #3AE2CE inset; 
} 
nav .navigation li.left { 
    flex-grow:1; 
    text-align:right; 
}

<nav> 
  <div class="nav-title">Блог</div> 
  <ul class="navigation"> 
    <li class="selectable">Для бизнеса</li> 
    <li class="selectable">Для юристов</li> 
    <li class="left">Подписатся на рассылку</li> 
  </ul> 
</nav>

Answer 2

Как вариант:

.header-top { 
   height:40px; 
    background: #efefef; 
    line-height:40px; 
} 
.header-nav { 
    height: 40px; 
    background: #ccc; 
    line-height:40px; 
} 
.header-nav .name { 
    float: left; 
    width: 80px; 
    display:block 
} 
.header-nav ul { 
    float:left; 
    display:block; 
    margin:0px; 
} 
.header-nav ul li { 
    float: left; 
    list-style:none; 
    margin-right:20px; 
    display:block; 
} 
.header-nav ul li a{ 
    text-decoration:none; 
} 
.header-nav ul li.active { 
    border-bottom:2px solid blue; 
} 
.clr { 
    clear:both; 
}

<div class="header-top"> 
    Header top 
</div> 
<div class="header-nav"> 
    <div class="name">Блог</div> 
    <ul> 
        <li class="active"><a href="#">Для бизнеса</a></li> 
        <li><a href="#">Для Юристов</a></li> 
    </ul> 
    <div class="clr"></div> 
</div>