私はこのウェブサイトの一致するナビゲーションバーを複製しようとしているホバー

に拡張ナビゲーションバーを作成します。ナビゲーションブロックの上にマウスを移動したとき、それはメニュー項目を表示するために拡大する私は何をしようとしているhttp://sincerelyjules.com/私はこのウェブサイトの一致するナビゲーションバーを複製しようとしているホバー

を（上記のウェブサイトをご覧ください）。

私はブートストラップと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

あなたは簡単に

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>

.....ナビゲーションバーとCSSトランジションに設定された高さを使用することにより、このようなものを作成することができます

_{私はブートストラップのユーザーではないので、ブートストラップ固有のクラスを知らない}

出典

2016-09-05 20:14:20 Scott

ありがとう！ほんとうにありがとう。しかし、私はそれを私のホームページに追加したときに集中していません。現在、display：インラインブロック。しかし、これは要素を中心にしていません。また、各「ナビアイテム」にホバー効果を追加して、ホバー時のフォントサイズを増やしました。しかし、それぞれの「ナビアイテム」をホバリングすると、要素のサイズが大きくなり、他のナビアイテムがその位置から外れます。ナビアイテムの位置をどうにか "修正"する方法はありますか？そうすれば、各アイテムをホバリングするとナビゲーションの流れが乱されることはありませんか？ありがとうございました！ –

*あなたが*したいことはすべて可能ですが、私はあなたのためにあなたのサイトをコメントに作成することはできません。 – Scott

私はこのウェブサイトの一致するナビゲーションバーを複製しようとしているホバー

答えて

関連する問題