隠しサイドバーがホバーに表示される

Question

デフォルトでは隠されているが、ホバーに表示されるサイドバーを作成しようとしています。私が考えることができる最も近い例は、この1つです：http://www.sidlee.com/。ホームページ以外のページにいるときは、サイドバーに数字だけが表示されます。この領域にマウスを移動すると、サイドバーが展開されてテキストが表示されます。私はJavaScriptでこれを行う方法があると思っていますが、私は専門家ではありませんので、私は誰かが私を助けてくれるかもしれません。

Answer 1

だけの簡単な例ですが、うまくいけば、それは正しい軌道に乗ってあなたを配置します:)

CSS：

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;} 
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;} 
#nav a span{margin:0 10px 0 0;} 
#nav a{color:#fff;font-size:14px;text-decoration:none;} 

のjQuery：

$(function(){ 
    $('#nav').hover(function(){ 
     $(this).animate({width:'200px'},500); 
    },function(){ 
     $(this).animate({width:'35px'},500); 
    }).trigger('mouseleave'); 
}); 

HTML：

<div id="nav"> 
<ul> 
<li><a href=""><span>01</span> HomePage</a></li> 
<li><a href=""><span>02</span> SubPage 1</a></li> 
<li><a href=""><span>03</span> SubPage 2</a></li> 
<li><a href=""><span>04</span> SubPage 3</a></li> 
<li><a href=""><span>05</span> SubPage 4</a></li> 
</ul> 
</div> 

#nav{width:35px;}を変更し、実際にJavaScriptやjQueryのせずにこれを行うにはどのような方法を見つけ.trigger('mouseleave')

乾杯

G.

Answer 2

.mouseenter()イベントが発生すると、.animate()と組み合わせてJQueryの.hover()メソッドを使用してdivをスライドさせることができます。

JQuery API for Hover

Answer 3

だけjQuery APIでコツコツ始めます。これは、あなたがその構造を始める方法です。 .animate（）を使うと、メニューCSSのプロパティをどのようにフィットするかを調整することができます。

$("#yourmenu").hover(function() { 
    $(this).stop(true,true); 
    $(this).show(); 
}, function() { 
    $(this).hide(); 
}); 

Answer 4

エドヴァルド、

私はこれに、以下の方法で行うことをお勧めしたいです。うまくいけば、正しいjQuery要素へのいくつかのアイデアやリンクがあれば、これを実現できるはずです。

最初のステップは、100％透明なdivとメニューを含むdivの中にdivを入れることです。次にメニューdivからその要素を非表示にして、コンテナダイブ上にマウスを置くと.hover（）メソッドを使用して内側のdivからスライドをアニメーション化することができます。

ここでは、開始する必要があるいくつかの基本的なコードを示します。

<div id="menuContainer"> 
    <div id="menu"> 
     <ul> 
      <li>This</li> 
      <li>Is</li> 
      <li>A</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
</div> 

その後、いくつかのCSS：

/* Set the container to be fixed to the top of the screen and set it's height 
    This is important so we know where the mouse can hover */ 
div#menuContainer { 
    background: transparent; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 50px; 
} 

/* Set the menu as hidden */ 
div#menu { 
    background: red; 
    width: 900px; 
    height: 
    margin: 0 auto; 
    display: none; 
} 

/* Fiddle with the menu items */ 
div#menu ul { list-style-type: none; } 
div#menu ul li { display: inline; } 

は、その後、いくつかのjQuery：

$('#menuContainer').mouseenter(function(){ 
    $('#menu').slideToggle(); 
}).mouseleave(function() { 
    $('#menu').slideToggle(); 
}); 

は、これは明らかに未テストコードですが、それはあなたの偉大なヘッドスタートを与える必要があります！ :-)

Answer 5

を削除（クロージングアニメーションのonloadなし）開始時に番号のみを表示したいです。この回答は、Uni/Collegeの課題に取り組んでいる人にとっては非常に効率的であり、JQueryなどのサードパーティのライブラリは使用できません。

明らかに、JQueryを使用すると、コードが少なくても同じ結果が得られます。ここで

あなたが行く：

.fa { 
 
    position: relative; 
 
    display: table-cell; 
 
    width: 60px; 
 
    height: 36px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 20px; 
 
} 
 
.main-menu:hover, 
 
nav.main-menu.expanded { 
 
    width: 250px; 
 
    overflow: visible; 
 
} 
 
.main-menu { 
 
    background: #fbfbfb; 
 
    border-right: 1px solid #e5e5e5; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    left: 0; 
 
    width: 60px; 
 
    overflow: hidden; 
 
    -webkit-transition: width .05s linear; 
 
    transition: width .05s linear; 
 
    -webkit-transform: translateZ(0) scale(1, 1); 
 
    z-index: 1000; 
 
} 
 
.main-menu>ul { 
 
    margin: 7px 0; 
 
} 
 
.main-menu li { 
 
    position: relative; 
 
    display: block; 
 
    width: 250px; 
 
} 
 
.main-menu li>a { 
 
    position: relative; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    color: #999; 
 
    font-family: arial; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    -webkit-transform: translateZ(0) scale(1, 1); 
 
    -webkit-transition: all .1s linear; 
 
    transition: all .1s linear; 
 
} 
 
.main-menu .nav-icon { 
 
    position: relative; 
 
    display: table-cell; 
 
    width: 60px; 
 
    height: 36px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 18px; 
 
} 
 
.main-menu .nav-text { 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 190px; 
 
    font-family: 'Titillium Web', sans-serif; 
 
} 
 
.main-menu>ul.logout { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
.no-touch .scrollable.hover { 
 
    overflow-y: hidden; 
 
} 
 
.no-touch .scrollable.hover:hover { 
 
    overflow-y: auto; 
 
    overflow: visible; 
 
} 
 
a:hover, 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 
nav { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 
nav ul, 
 
nav li { 
 
    outline: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main-menu li:hover>a, 
 
nav.main-menu li.active>a, 
 
.dropdown-menu>li>a:hover, 
 
.dropdown-menu>li>a:focus, 
 
.dropdown-menu>.active>a, 
 
.dropdown-menu>.active>a:hover, 
 
.dropdown-menu>.active>a:focus, 
 
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a, 
 
.dashboard-page nav.dashboard-menu ul li.active a { 
 
    color: #fff; 
 
    background-color: #5fa2db; 
 
} 
 
.area { 
 
    float: left; 
 
    background: #e2e2e2; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
@font-face { 
 
    font-family: 'Titillium Web'; 
 
    font-style: normal; 
 
    font-weight: 300; 
 
    src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="area"></div> 
 
    <nav class="main-menu"> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-home fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Dashboard 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-laptop fa-2x"></i> 
 
      <span class="nav-text"> 
 
          UI Components 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-list fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Forms 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-folder-open fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Pages 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-bar-chart-o fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Graphs and Statistics 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-font fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Typography and Icons 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-table fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Tables 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-map-marker fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Maps 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-info fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Documentation 
 
         </span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 

 
    <ul class="logout"> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-power-off fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Logout 
 
         </span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

・ホープ、このことができます:)