0

以下に提供されているのは、私のhtmlとcssコードのスニペットです.htmlとcssだけでなく、javascriptにもどのように追加する必要がありますか?そして（左から閉じる）div？

私は現在、どこから始めればよいかわからないため、これについて書かれたJavaScriptを持っていません...ただし、jquery-1.3.2を使用しています

誰かが jsfiddle を提供できる場合は、大いに感謝します;)

HTML

<div id="left">
    <a href="#">Edit Profile</a>
    <a href="#">Settings</a>
    <a href="?logoff">Sign Out</a>
</div>

CSS

#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
  width: 145px;
  height: 22px;
  padding: 5px 12px;
  margin: 0;
  border-bottom: 1px solid rgba(204, 204, 204, 0.09);
  float: left;
  display: inline-block;
  position: relative;
  top: 34px;
  color: #15ADFF;
  font: 16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
  width: 138px;
  background: rgba(204, 204, 204, 0.4);
  border-right: 7px solid #15ADFF;
  color: #111;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}

#open、#closeおよび/または.open、のいずれかとしてIDまたはクラスを追加する必要があると想定しています.close。

4

2 に答える 2

2

jQuery の animate 関数を使用すると、十分に簡単に作業を行うことができます。

.animate に関するチュートリアル/情報:

http://viralpatel.net/blogs/understanding-jquery-animate-function/

于 2013-08-11T15:01:46.200 に答える
0

ページのレイアウトは重要であるため、必要なものを知るには十分な情報がありません。メニューが絶対的か、固定か、相対的かを知らずに。

jQuery の animate() メソッドを使用して CSS の数値プロパティをアニメーション化し、 と を使用mouseenterしmouseleaveてメニューをスライドできます。

http://jsfiddle.net/thinkingmedia/8a7GL/1/

わずか 2 行のコードです。

于 2013-08-11T17:04:55.847 に答える