0

ドロップダウン メニューがある Web サイトで作業しました。レイアウトをレスポンシブにし、モバイル デバイス用のメディア クエリを追加しました。唯一のことは、ドロップダウンメニューはモバイルでもドロップダウンしますが、最初のリンクもアクティブにするため、そのページに直接移動し、応答するのに1秒ほどかかります.

私は学校でこれについて学びましたが、onclick などの非常に簡単な修正方法があることは間違いありません。遅くなりましたが、これを修正しようとしていますが、何も見つかりません。

これはドロップダウン html です。

<div class="nav">
    <div class="links">
        <ul id="dropdown">
            <li>
                <a href="index.html"> Tetterode </a>
                <ul>
                    <li><a href="project.html">Project</a></li>
                    <li><a href="promenade.html">Promenade</a></li>
                    <li><a href="brochure.html">Brochure</a></li>
                    <li><a href="impressies.html">Impressies</a></li>
                </ul>
            </li>
            <li>
                <a href="oplevering.html">Woningen</a>
                <ul>
                    <li><a href="oplevering.html">Oplevering</a></li>
                    <li><a href="impressies.html">Impressies</a></li>
                </ul>
            </li>
            <li class="currentpage">
                <a href="ligging.html">Locatie</a>
                <ul>
                    <li><a href="ligging.html">Ligging</a></li>
                    <li><a href="situatie.html">Situatie</a></li>
                    <li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li>

                </ul>
            </li>
            <li>
                <a href="hypotheken.html">Financiering</a>
                <ul>
                    <li><a href="hypotheken.html">Hypotheken</a></li>
                </ul>
            </li>
            <li>
                <a href="makelaars.html">Contact</a>
                <ul>
                    <li><a href="makelaars.html">Makelaars</a></li>
                </ul>
            </li>               
        </ul>
    </div>
</div>

これが CSS です。

.nav{
    width: 100%;
    height:50px;
    background-image:url("bg.jpg");
    background-repeat:repeat;
    text-align:center;
    padding-bottom:0px;
    margin-bottom:0px;
}
.links ul li {
   list-style-type: none;
   padding-right: 15px;
   height:50px;
   display:inline-block;
   padding-top:0px;
   line-height:50px;
   padding-left:14px;
   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
   margin-top:0px;
}
.links ul li:hover {
    height:50px;
   background-color:#b5001e;
   display:inline-block;
   margin:0px;
}
.links a {
   text-transform:uppercase;
   font-family:helvetica;
   font-size:16px;
   color:#fff;
   display:inline-block;
   font-size:20px;
   text-decoration:none;
}
.links a:hover {
  background-color:transparent;
}
#dropdown ul{
    background-color:#b5001e;
    list-style:none;
    position:absolute;
    left:-9999px;
    z-index:20;
    font-size:16px;
    padding-top:0px;
    margin-top:-2px;
    }
#dropdown ul li{
    float:none;
}
#dropdown ul a{
    white-space:nowrap; 
    font-size:16px;
}
#dropdown li:hover ul{ 
    left:0;
}
#dropdown li:hover a{ 
    text-decoration:underline;
}
#dropdown li:hover ul a{ 
    text-decoration:none;
}
#dropdown li:hover ul li a:hover{ 
color:#000;
}
.currentpage{
   height:50px;
   background-color:#b5001e;
   display:inline-block;
}

私は基本的に、ベース ナビゲーション アイテム (tetterode、woningen など) をクリックして、他のアイテムが表示されるのを確認できるようにしたいと考えています。

4

1 に答える 1

1

コードのJSFIDDLEは次のとおりです。

IOS 6 を使用して Iphone 4 でテストしました。メニューの 1 つをクリックすると、そのメニューのリンクにリダイレクトされます。この問題を解決するには、コードをモバイル サイトで機能させるために、これらのリンクを削除して # に置き換える必要があります。

したがって、この HTML 構造は問題を解決します (モバイル サイトでのみ使用してください)。

<div class="nav">
    <div class="links">
        <ul id="dropdown">
            <li>
                <a href="#"> Tetterode </a>
                <ul>
                    <li><a href="project.html">Project</a></li>
                    <li><a href="promenade.html">Promenade</a></li>
                    <li><a href="brochure.html">Brochure</a></li>
                    <li><a href="impressies.html">Impressies</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Woningen</a>
                <ul>
                    <li><a href="oplevering.html">Oplevering</a></li>
                    <li><a href="impressies.html">Impressies</a></li>
                </ul>
            </li>
            <li class="currentpage">
                <a href="#">Locatie</a>
                <ul>
                    <li><a href="ligging.html">Ligging</a></li>
                    <li><a href="situatie.html">Situatie</a></li>
                    <li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li>

                </ul>
            </li>
            <li>
                <a href="#">Financiering</a>
                <ul>
                    <li><a href="hypotheken.html">Hypotheken</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Contact</a>
                <ul>
                    <li><a href="makelaars.html">Makelaars</a></li>
                </ul>
            </li>               
        </ul>
    </div>
</div>

私の答えは愚かに聞こえるかもしれません。ただし、同じ構造と同じ css を維持したい場合は、これが唯一の方法です。楽しくコーディングしましょう！

于 2013-03-16T20:37:00.533 に答える