Создание расширенной панели навигации на Hover

Я пытаюсь повторить панель навигации, чтобы соответствовать этому веб-сайта: http://sincerelyjules.com/Создание расширенной панели навигации на Hover

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

Я использовал Bootstrap и CSS, но ни один из них не работает. Если кто-то может предоставить некоторые предложения или материалы, это было бы очень полезно! Извинения за невероятно неаккуратное кодирование.

код ниже:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.nav-bar-block { 
 
    padding: 9px; 
 
    overflow: hidden; 
 
    background-color: #F8F8F8; 
 
    background-size: cover; 
 
    border-bottom: 1px solid #ebebeb; 
 
    display: block; 
 
} 
 
.nav-bar-block h1 { 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: #4b4b4b; 
 
    font-size: 60px; 
 
    padding: 0px 200px; 
 
} 
 
.nav-bar-menu { 
 
    list-style-type: none; 
 
}

<html> 
 
<head> 
 
    <!-- css --> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <nav class="navbar-fixed-top"> 
 
    <div class="nav-bar-block"> 
 
     <h1>Navbar Title</h1> 
 
    </div> 
 
    </nav> 
 
</body> 
 
</html>

источник

2016-09-05 C. Lagos

Вы можете легко создать что-то вроде этого, используя набор высоты для панели навигации и CSS переходы .....

body { 
 
    margin: 0; 
 
    padding: 0;  
 
} 
 

 

 
.nav-bar-block { 
 
    padding: 9px; 
 
    overflow: hidden; 
 
    background-color: #F8F8F8; 
 
    background-size: cover; 
 
    border-bottom: 1px solid #ebebeb; 
 
    display: block; 
 
    height: 100px; 
 
    transition: all 1s ease; 
 
} 
 

 
.nav-bar-block:hover { 
 
    height: 160px; 
 
    transition: all 1s ease; 
 
    } 
 

 
.nav-bar-block h1 { 
 
     text-align: center; 
 
     font-family: 'Raleway', sans-serif; 
 
     color: #4b4b4b; 
 
     font-size: 60px; 
 
     padding: 0px 50px; 
 
     margin: 10px 0 20px 0; 
 
} 
 

 
.nav-bar-menu { 
 
     list-style-type: none; 
 
     margin: 20px auto; 
 
} 
 

 
.nav-bar-menu li { 
 
    display: inline-block; 
 
    margin: 0 10px; }

<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 

 
<nav class="navbar-fixed-top"> 
 
     <div class="nav-bar-block"> 
 
      <h1>Navbar Title</h1> 
 
      <ul class="nav-bar-menu"> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      <li>Nav item</li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

_{Я не являюсь пользователем начальной загрузки, поэтому не знаю конкретных классов начальной загрузки}

источник

2016-09-05 20:14:20 Scott

Спасибо! Я очень ценю это. Тем не менее, это не сосредоточено, когда я добавил его на свою домашнюю страницу. В настоящее время дисплей: встроенный блок; но это не центрирует элементы. Кроме того, я добавил эффект зависания для каждого элемента Nav, чтобы увеличить размер шрифта при наведении. Однако при наведении на каждый «элемент Nav» элементы увеличивают размер и выталкивают другие элементы Nav из своего положения. Есть ли способ как-то «зафиксировать» положение элементов Nav, поэтому, когда он зависает над каждым элементом, он не нарушает поток навигации? Спасибо за помощь! –

Все, что вы * хотите сделать, возможно, но я не могу по возможности построить ваш сайт для вас в комментариях. – Scott

Создание расширенной панели навигации на Hover

ответ

Смежные вопросы