自動表示と非表示のナビゲーションバー

こんにちは私は自動表示を非表示にしてナビゲーションメニューを隠そうとしています。私はこのアイデアをどのように実装するのかは分かりません。私が望んでいるアイデアは、ウェブサイト上のサイトからナビバーが外れてしまうためです。カーソルが上にくると、ナビゲーションバーが表示されます。（もっと良い例は、あなたがMacを所有しているなら、そのアイデアは自動的に隠されたDockから来る）。自動表示と非表示のナビゲーションバー

これを実装するには、.CSSトランジションまたはJQuery/Javascriptを使用しますか。

私が働いている相続人はナビゲーションバー、

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
    background-color: #a137a7; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
    
 
    
 
} 
 

 
li { 
 
    float: left; 
 

 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
} 
 

 
/* Hover color */ 
 
li a:hover { 
 
    background-color: #732878; 
 
} 
 

 
.footer { 
 
    color: #fff; 
 
    clear: both; 
 
    margin: 0em 0em 0em 0em; 
 
    padding: 0.70em 0.75em; 
 
    background: #000; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    top: 490px; 
 
    border-top: 1px solid #000; 
 
    opacity: .7; 
 
}

<nav> 
 
     
 
     <ul> 
 
    
 
     
 
     <li><a href="/"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> 
 
      
 
     <li><a href=/""a target="_blank"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> 
 
     
 
     <li><a href="/"><img class="blog"  
 
     src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> 
 

 
<li><a href="/" onclick="window.open(this.href, 'mywin', 
 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
 
     
 
    
 
    <li style="float:right"><a href="/"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li> 
 
     
 
     <li style="float:right"><a href="/"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li> 
 
     
 
     <li style="float:right"><a href="/"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li> 
 
     
 
    <li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"  
 
     src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> 
 
     
 
     
 
     
 

 
</ul> 
 
     </nav> 
 
     <body>

出典

2016-09-08 Sean James

また、WindowsおよびLinuxでも利用できます。 – vivekkupadhyay

私が上下にスライドするnavを使用します。私のコードを参照してください：

ナビゲーションに赤い枠線が追加されています（デモ用）。

$(function() { 
 
    $('.hover').on('mouseenter mouseleave', function() { 
 
    $('nav').toggleClass('toggleNav'); 
 
    }); 
 
});

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
nav { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: 0; 
 
    right: 0; 
 
    border: 1px solid red; 
 
    height: 175px; 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
} 
 
nav:hover, nav.toggleNav { 
 
    top: 0px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #a137a7; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
/* Hover color */ 
 

 
li a:hover { 
 
    background-color: #732878; 
 
} 
 
.footer { 
 
    color: #fff; 
 
    clear: both; 
 
    margin: 0em 0em 0em 0em; 
 
    padding: 0.70em 0.75em; 
 
    background: #000; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    top: 490px; 
 
    border-top: 1px solid #000; 
 
    opacity: .7; 
 
} 
 
.hover { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: lightblue; 
 
    margin-top: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 

 
    <ul> 
 
    <li> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" target="_blank"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/"> 
 
     <img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" onclick="window.open(this.href, 'mywin', 
 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" /> 
 
     </a> 
 
    </li> 
 

 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/" target="_blank "> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " /> 
 
     </a> 
 
    </li> 
 

 

 

 
    /
 
    </ul> 
 
</nav> 
 

 
<div class="hover">Hover here</div>

出典

2016-09-08 10:40:51 LinkinTED

ページのコンテンツにナビバーを移動させることは可能ですか？プレースホルダーのように？ –

純粋なCSSではなく、jQueryで、確かに私の編集を参照してください – LinkinTED

ありがとう、これは大変ありがとうございます。ブラウザのサポートに関してちょうど1つの質問。私は私のウェブサイト上のフラッシュ要素上でこのメニューを使用しています。ポップダウンメニューは、Firefoxを除くすべてのブラウザで完全に機能します。 –

これは一度

function myFunction(e) { 
 
    var x = e.clientX; 
 
    var y = e.clientY; 
 
    var coor = "Coordinates: (" + x + "," + y + ")"; 
 
    document.getElementById("demo").innerHTML = coor; 
 
    if(y<=50){ 
 
    document.getElementById("navBar").style.display = 'block'; 
 
    } 
 
    else{ 
 
    document.getElementById("navBar").style.display = 'none'; 
 
    } 
 
} 
 

 
function clearCoor() { 
 
    document.getElementById("demo").innerHTML = ""; 
 
}

div { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
} 
 
.nav{ 
 
    width:100%; 
 
    height:50px; 
 
    background:#00ffff; 
 
    display:none; 
 
    }

<div onmousemove="myFunction(event)" onmouseout="clearCoor()"> 
 
<div class="nav" id="navBar"></div> 
 

 
</div> 
 
<p id="demo"></p>

出典

2016-09-08 11:00:14

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
nav { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: 0; 
 
    right: 0; 
 
    border: 1px solid red; 
 
    height: 175px; 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
} 
 
nav:hover { 
 
    top: 0px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #a137a7; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
/* Hover color */ 
 

 
li a:hover { 
 
    background-color: #732878; 
 
} 
 
.footer { 
 
    color: #fff; 
 
    clear: both; 
 
    margin: 0em 0em 0em 0em; 
 
    padding: 0.70em 0.75em; 
 
    background: #000; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    top: 490px; 
 
    border-top: 1px solid #000; 
 
    opacity: .7; 
 
}

<nav> 
 

 
    <ul> 
 
    <li> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" target="_blank"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/"> 
 
     <img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" onclick="window.open(this.href, 'mywin', 
 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" /> 
 
     </a> 
 
    </li> 
 

 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li style="float:right"> 
 
     <a href="/" target="_blank "> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " /> 
 
     </a> 
 
    </li> 
 

 

 

 
    /
 
    </ul> 
 
</nav> 
 

 
<body>

を試してみてくださいあなたの条件の例です。

出典

2016-09-08 11:05:55

自動表示と非表示のナビゲーションバー

答えて

関連する問題