0

私は弟のために Web サイトを作成しています。私は彼のためにドロップダウン CSS メニューを作成しました。それから彼は、人々がメインのナビゲーションボックスをクリックして、メニューをドロップダウンして二次レベルを表示するようにしたいと決めました...

a 要素の :hover を :focus (a:active も) に変更しようとしましたが、これは IE9 では正常に機能しましたが、Firefox、Safari、Chrome、および Opera は新しいコマンドを認識しませんでした。私は Javascript の代替案について読みましたが、その方法に自信を持って進むにはあまり詳しくありません。

誰かが助けてくれるかどうか疑問に思っています：

ウェブへのリンク: http://www.doogledesigns.co.uk/prime%20elements/website/

HTML コード:

<div class="nav1">
<div class="menu-item-home">
<h4><a href="#">Home</a></h4>
<ul>
<li><a href="#">Plumbing &amp; Gas Work</a></li>
<li><a href="#">Electrical Work</a></li>
<li><a href="#">Extensions</a></li>
<li><a href="#">Internal &amp; External Developments</a></li>
</ul>
</div>

<div class="menu-item-garden">
<h4><a href="#">Garden</a></h4>
<ul>
<li><a href="#">Garden Maintenance</a></li>
<li><a href="#">Landscaping</a></li>
<li><a href="#">Patios &amp; Driveways</a></li>
<li><a href="#">Walls &amp; Fencing</a></li>
<li><a href="#">Ponds &amp; Water Features</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Drainage</a></li>
</ul>
</div>

<div class="menu-item-construction">
<h4><a href="#">Construction</a></h4>
<ul>
<li><a href="#">Home Redevelopment</a></li>
<li><a href="#">New Builds</a></li>
<li><a href="#">Driveways</a></li>
</ul>
</div>

</div>

CSS コード:

.nav1 {
float: left;
background: #404041;
height: 500px;
line-height: 1.5;
width: 170px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,2);
box-shadow: 2px 2px 5px rgba(0,0,0,2);
}

.menu-item-home, .menu-item-garden, .menu-item-construction {
background: #404041;
width: 170px;
}

.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px; 
background: #10702a;
}

.menu-item-home h4 a, .menu-item-garden h4 a, .menu-item-construction h4 a {
color: #fff;
display: block;
text-decoration: none;
width: 170px;
}

/* Menu Header Styles */
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
border-bottom: 1px solid rgba(0,0,0,3);
border-top: 1px solid rgba(225,225,225,0.2);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;

/* Gradient */
background: #a90329; /* Old browsers */ 
background: -moz-linear-gradient(top, #02942a 0%, #0b872d 44%, #0f722a 100%); /* FF3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02942a), color-stop(44%,#0b872d), color-stop(100%,#0f722a)); /* Chrome,Safari4+ */  
background: -webkit-linear-gradient(top, #a90329 0%,#80b872d 44%,#0f722a 100%); /*   Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* Opera 11.10+ */  
background: -ms-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* IE10+ */  
background: linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02942a',   endColorstr='#0f722a',GradientType=0 ); /* IE6-9 */
}

/* ul styles */
.menu-item-home ul, .menu-item-garden ul, .menu-item-construction ul {
background: #404041;
font-size: 12px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px
}

.menu-item-home ul a, .menu-item-garden ul a, .menu-item-construction ul a {
margin-left: 2.5px;
text-decoration: none;
color: #404041;
diplay: block;
width: 173px;
}

/* li styles */
.menu-item-home li, .menu-item-garden li, .menu-item-construction li {
border-bottom: 1px solid #eee;
}

.menu-item-home li:hover, .menu-item-garden li:hover, .menu-item-construction li:hover {
background: #eee;
}

/* ul styles */
.menu-item-home ul, .menu-item-construction ul, .menu-item-garden ul {
background: #fff;
font-size: 12px;
line-height: 30px;
min-height: 0px;
max-height: 0px /* collapses the menu */
list-style-type: none;
overflow: hidden;
padding: 0px;

/* Animation */
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.menu-item-home:hover ul {
height: 155px;
}

.menu-item-garden:hover ul {
height: 220px;
}

.menu-item-construction:hover ul {
height: 90px;
}

CSS シートを少し整理する必要がありますが、一般的な要点はわかります。

4

1 に答える 1

0

クリックイベントでそのメニューを表示したい。それを可能にし、クロスブラウザーとの互換性を持たせるには、jquery libraryjQuery を使用してライブラリをダウンロードし、<head>ページのセクションにリンクを添付し、jquery コードを記述してクリック イベント ハンドラーを添付することをお勧めします。

jQueryのダウンロードリンク

基本的に、jquery をページにリンクした後は、これだけをコーディングする必要があります。

<script>

$(document).ready(function(){
   $(".menu-item-home a").click(function(){
      $(".menu-item-home  ul").slideToggle('slow');
   });
$(".menu-item-garden a").click(function(){
    $(".menu-item-garden  ul").slideToggle('slow');
});
$(".menu-item-construction a").click(function(){
    $(".menu-item-construction  ul").slideToggle('slow');
});
});

</script>

css にも少し変更が必要です。

あなたのCSSコードを変更し、あなたのウェブサイトのjqueryコードを書き留めました

このリンクを確認すると、変更されたコードの両方が表示されます。右側には、クリックが有効になっている作業中の Web サイトがあります。

http://jsfiddle.net/znsZu/

それが役に立てば幸い。

于 2013-03-31T13:31:56.040 に答える