-2
私はこのスクリプトを使用してハンバーガーメニューを開きます。これは正常に動作しますが、リスト項目の中には副項目があります。アイテムをクリックしたときにサブアイテムが開くようにスクリプトを調整する必要はありますか？サブアイテムをリストで開くにはどうすればよいですか？
\t \t function myResponsive() {
\t \t \t var x = document.getElementById("myMenu");
\t \t \t if (x.className === "menu-hori") {
\t \t \t \t x.className += " responsive";
\t \t \t } else {
\t \t \t \t x.className = "menu-hori";
\t \t \t }
\t \t }\t .menu-hori{
\t \t width: 1100px;
\t \t margin: auto;
\t \t height: auto;
\t \t margin-top: 15px;
\t \t padding: 0px;
\t \t display: table;
\t \t z-index: 100;
\t \t background: grey;
\t }
\t
\t .menu-hori ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t }
\t .menu-hori ul ul {
\t opacity: 0;
\t \t position: absolute;
\t \t top: 160%;
\t \t visibility: hidden;
\t \t transition: all .4s ease;
\t \t -webkit-transition: all .4s ease;
\t }
\t
\t .menu-hori ul ul ul {
\t \t top: 0%;
\t \t left: 160%;
\t }
\t
\t .menu-hori ul ul li:hover > ul {
\t top: 0%;
\t left: 100%;
\t opacity: 1;
\t visibility: visible;
\t }
\t
\t .menu-hori ul li:hover > ul {
\t opacity: 1;
\t top: 100%;
\t visibility: visible;
\t }
\t
\t .menu-hori ul li {
\t float: left;
\t position: relative;
\t }
\t
\t
\t .menu-hori ul ul li { float: none; }
\t .menu-hori ul li {
\t \t background-color: grey;
\t \t cursor: pointer;
\t }
\t .menu-hori ul a {
\t \t text-decoration: none;
\t \t display: block;
\t \t color: white;
\t \t padding: 10px 15px;
\t \t width: auto;
\t \t min-width: 100px;
\t \t text-align: center;
\t \t text-shadow: 0px -1px 0px rgba(0,0,0,.2);
\t }
\t .menu-hori ul li:hover { background-color: #069CDE; }
\t .menu-hori ul li a:hover { background-color: #069CDE; }
\t
\t .menu-hori span.dropBottom,span.dropRight {
\t display: block;
\t box-shadow: inset 2px 0px 0px #069CDE;
\t position: absolute;
\t left: 0px;
\t width: 100%;
\t height: 100%;
\t top: 0px;
\t }
\t .menu-hori span.dropBottom {
\t box-shadow: inset 0px 2px 0px #069CDE;
\t position: absolute;
\t width: 100%;
\t bottom: 0px;
\t }
\t .menu-hori a:hover {
\t background-color: #ddd;
\t color: black;
\t }
\t .menu-hori .icon {
\t display: none;
\t }
@media screen and (max-width: 1100px) {
.menu-hori{
\t width: 100%;
\t min-height: 40px;
\t height: auto;
\t margin-top: 15px;
\t padding: 0px;
\t display: table;
\t z-index: 100;
\t background: grey;
\t display: block;
}
}
@media screen and (max-width: 1100px) {
\t .menu-hori ul li{
\t \t float: none;
\t }
\t
\t .menu-hori ul li a{
\t \t display: none; \t
\t }
\t
\t .menu-hori ul li a.icon{
\t \t display: block;
\t \t text-align: right;
\t }
\t
\t .responsive ul li a{
\t \t \t display: block;
\t }
}<div class="menu-hori" id="myMenu">
<ul>
\t <li><a href="javascript:void(0);" style="font-size:15px;" class="icon"onclick="myResponsive()">☰</a></li>
<li><a>BEVEILIGINGSCAMERA</a><span class="dropBottom"></span>
<ul>
<li><a href="#" class="dropRight">Analoog</a>
<ul>
<li><a href="#">irc10</a></li>
<li><a href="#">ird29</a></li>
<li><a href="#">ird1</a></li>
</ul>
</li>
\t </ul>
</li>
</div>は、私は今、クリックされたときにサブアイテムも開かれているように、私はJavaScriptを調整したいと思います..それが今ではかなり多くのの質問にコードスニペットを追加しました今のように馬鹿にされていない。
あなたは示されていない、あなたのHTML内の要素に、CSSクラス、私たちが見ることができないのルールを追加しています。どのように私たちが助けてくれるのですか？問題を再現できるように、「* [mcve] *」コードを表示してください。 –
htmlが表示されていないので、考えはありません。あなたはhambugerメニューを表示するのと同じ方法ですか？あなたはサブメニューを表す他のCSSクラスを持っていますか？私たちは、私たちがそれらを再現する方法を知る前に、どのように隠されているか知っていなければなりません。 – Shilly