5

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

4

5 に答える 5

7

これは単なる例ですが、うまくいけば、正しい軌道に乗ることができます:)

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;}て削除します。.trigger('mouseleave')

乾杯

G.

于 2011-01-27T00:49:40.973 に答える
3

JavaScriptやjQueryを使わずに実際にこれを行う方法を見つけました。この回答は、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>

お役に立てれば ：）

于 2014-10-21T16:44:38.060 に答える
1

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

ホバー用の JQuery API

于 2011-01-27T00:37:11.333 に答える
1

jQuery APIのプラグインを開始するだけです。これが、その構造を開始する方法です。.animate() を使用すると、メニュー css プロパティを適切に調整することができます。

$("#yourmenu").hover( function() {
    $(this).stop(true,true);
    $(this).show();
}, function () {
   $(this).hide();
});
于 2011-01-27T00:41:10.393 に答える
1

エドヴァルド

これを次の方法で行うことをお勧めします。うまくいけば、いくつかのアイデアと適切な jQuery 要素へのリンクがあれば、これを実現できるはずです。

最初のステップは、100% 透明な 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();
});

これは明らかにテストされていないコードですが、有利なスタートが切れるはずです! :-)

于 2011-01-27T00:48:48.503 に答える