2

だから私は2つの問題を抱えています。1つは、「ホーム」にいるときに「アバウト」にカーソルを合わせると、アバウトは本来の白い色になりますが、ホームはデフォルトの灰色に戻ります。ホバーしているメニュー項目を白いテキストにし、その周りに灰色のボックスを配置し、現在表示しているページ（ホーム）はテキスト内で白く点灯し、ボックスはありません。また、マウスを離すと（メニュー項目にカーソルを合わせないで）、最後にカーソルを合わせた項目に白い色が残ります。現在のページ（ホーム）のテキストを白にしたい。

私が気付いたもう1つの問題は、[バージョン情報]タブに移動すると、[ホーム]ボタンと[バージョン情報]ボタンの「寸法」（パディング？）が[ホーム]タブの場合と異なることです。それはcssファイルにあるので、すべてのページにあるはずですよね？

私は自分のWebデザインクラスのWebサイトを作成していて、これはまったく新しいものですが、コピーと貼り付けを行わずにランボルギーニのWebサイトをほぼ再現することができました。メニューシステムの意味がわかります。同じように見せたいです（メニュー項目にカーソルを合わせると、フォントが白になり、その周りに灰色のボックスが表示されますが、現在のメニュー項目は色（テキスト）が白のままです。箱）。基本的に、ランボルギーニホームページと同じ種類のドロップダウンメニューです（メニュー項目の上に移動すると、サブメニューがそのようにドロップダウンします）。

コード（メニュー）Css：

#dolphincontainer{
    position:relative; 
    color:#E0E0E0;
    background:#000000;
    padding-top:40px;
    width:100%;
    font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav {
    position:relative;
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    background:#000000 url(images/dolphin_bg.gif) repeat-x bottom left;
    padding:0 0 0 60px;
}
#dolphinnav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    float:left;
}
#dolphinnav ul li {
    display:block;
    float:left;
    margin:0 1px;
}
#dolphinnav ul li a{
    display:block;
    float:left;
    color:#3D3D3D;
    text-decoration:none;
    padding:0 10 0 20px;
    height:10px;
}
#dolphinnav ul li a span {
    padding:12px 20px 0 0;
    height:21px;
    float:left;
}
#dolphinnav ul li a:hover {
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span {
    display:block;
    width:auto;
    cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
    color:#fff;
    background:#000000 url(images/dolphin_left-ON.gif) no-repeat top left;
    line-height:275%;
}
#dolphinnav ul li a.current span {
    display:block;
    padding:0 20px 0 0;width:auto;
    background:#000000 url(images/dolphin_right-ON.gif) no-repeat top right;
    height:33px;
}
#dolphin_inner{
    color: white; 
    padding: 5px; 
    font-size: 80%; 
    height: 1em
}

#dolphin_inner a:link, 
#dolphin_inner a:visited, 
#dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
body {background-color:#000000;} 
.innercontent{display: none;}

コード（メニュー）HTML：

<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="about" class="innercontent">   
</div>
</div>
</div>

<script type="text/javascript">

//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 0)

</script>
4

1 に答える 1

0

これはかなり簡単です。JSfiddle HERE メニューはこんな感じ。

<div> <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Heritage</a></li>
    <li><a href="#">Models</a></li>
    <li><a href="#">Dealers</a></li>
    <li><a href="#">Experience</a></li>
    <li><a href="#">Store</a></li> </ul>​ </div>

cssはこんな感じ。

body{
    background: black;
}
li{

    float: left;
    margin-right: 10px;
}
a{
    color: gray;
    text-decoration: none;
    padding: 5px 10px;
}
a:hover{
    color: white;
    background: gray;
}
a.active{
    color: white;
}
.hover{
    color: white;
}

そして、このようなJQuery

$(function(){
    $('a').hover(function(){
        $('a').removeClass('hover');
        $(this).addClass('hover');
    });
});​
​

私がやったことは、現在のページに「アクティブ」なクラスがあるということです。クラスが「アクティブ」の場合、cssカラーを白にします。他の Jquery コードを使用すると、現在のページを検出できます。ここには含めていません。しかし重要なことは、"<a href='#'>"そのページにあるときにクラスを「アクティブ」にすることができるということです。

よし、次は…

JQueryでは「ホバー」を使用しました。リンクまたはこの場合はナビゲーション項目にカーソルを合わせると、「hover」というクラスが与えられます。css ".hover" を見ると、"color: white;" があります。アイテムにカーソルを合わせると、クラス「ホバー」が削除されますが、現在ホバーしているアイテムにはクラス「ホバー」を与えます。

それが役立つことを願っています。

于 2012-12-03T23:31:34.167 に答える