Q&A
「うまくいかない」だと何が起きてるのか他者には何も伝わりません。
あと、このコードは1ファイルに全て書いてるのでしょうか。
メニューバーを画像の上に重なるように表示したいのですが、画像の裏でメニューバーが開いており、うまくいきません。
タグや属性をいくつか変えてみたのですが、うまくいきませんでした。。。
htmlを書くのに慣れていないため、順番がめちゃくちゃで見にくいと思います。申し訳ございません。
<html> <body> <nav> <menu> <menuitem id="demo1"> <a>メニュー</a> <menu> <menuitem><a>ログイン画面</a></menuitem> <menuitem> <a>アカウント作成</a> <menu> <menuitem><a>手順</a></menuitem> <menuitem><a>作成はこちらから</a></menuitem> <menuitem><a>Q＆A</a></menuitem> </menu> </menuitem> <menuitem><a>サポート</a></menuitem> <menuitem id="demo2"> <a>アイディア</a> <menu> <menuitem><a>test</a></menuitem> </menu> </menuitem> </menu> </menuitem> </menu> </nav> </body> </html> <style> demo1 { position:fixed; } html, body{ padding:0px; margin:0px; background:#191A1D; font-family: 'Karla', sans-serif; width:100vw; z-index:200; } body * { margin:0; padding:0; } /* HTML Nav Styles */ /* HTML Nav Styles */ /* HTML Nav Styles */ nav menuitem { position:relative; display:block; opacity:0; cursor:pointer; } nav menuitem > menu { position: absolute; pointer-events:none; } nav > menu { display:flex; } nav > menu > menuitem { pointer-events: all; opacity:1; } menu menuitem a { white-space:nowrap; display:block; } menuitem:hover > menu { pointer-events:initial; } menuitem:hover > menu > menuitem, menu:hover > menuitem{ opacity:1; } nav > menu > menuitem menuitem menu { transform:translateX(100%); top:0; right:0; } /* User Styles Below Not Required */ /* User Styles Below Not Required */ /* User Styles Below Not Required */ nav { margin-top: 40px; margin-left: 40px; } nav a { background:#75F; color:#FFF; min-width:190px; transition: background 0.5s, color 0.5s, transform 0.5s; margin:0px 6px 6px 0px; padding:20px 40px; box-sizing:border-box; border-radius:3px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); position:relative; } nav a:hover:before { content: ''; top:0;left:0; position:absolute; background:rgba(0, 0, 0, 0.2); width:100%; height:100%; } nav > menu > menuitem > a + menu:after{ content: ''; position:absolute; border:10px solid transparent; border-top: 10px solid white; left:12px; top: -40px; } nav menuitem > menu > menuitem > a + menu:after{ content: ''; position:absolute; border:10px solid transparent; border-left: 10px solid white; top: 20px; left:-180px; transition: opacity 0.6, transform 0s; } nav > menu > menuitem > menu > menuitem{ transition: transform 0.6s, opacity 0.6s; transform:translateY(150%); opacity:0; } nav > menu > menuitem:hover > menu > menuitem, nav > menu > menuitem.hover > menu > menuitem{ transform:translateY(0%); opacity: 1; } menuitem > menu > menuitem > menu > menuitem{ transition: transform 0.6s, opacity 0.6s; transform:translateX(195px) translateY(0%); opacity: 0; } menuitem > menu > menuitem:hover > menu > menuitem, menuitem > menu > menuitem.hover > menu > menuitem{ transform:translateX(0) translateY(0%); opacity: 1; } </style> <script> // For the thumbnail demo! :] var count = 1 setTimeout(demo, 500) setTimeout(demo, 700) setTimeout(demo, 900) setTimeout(reset, 2000) setTimeout(demo, 2500) setTimeout(demo, 2750) setTimeout(demo, 3050) var mousein = false function demo() { if(mousein) return document.getElementById('demo' + count++) .classList.toggle('hover') } function demo2() { if(mousein) return document.getElementById('demo2') .classList.toggle('hover') } function reset() { count = 1 var hovers = document.querySelectorAll('.hover') for(var i = 0; i < hovers.length; i++ ) { hovers[i].classList.remove('hover') } } document.addEventListener('mouseover', function() { mousein = true reset() }) </script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slider').bxSlider({ auto: true, pause: 5000, }); }); </script> <div class="slider"> <img src="C:/Users/Administrator/Pictures/Camera Roll/image.png" width="500" height="550" alt=""> <img src="C:/Users/Administrator/Pictures/Camera Roll/maxresdefault.jpg" width="500" height="550" alt=""> <img src="C:/Users/Administrator/Pictures/Camera Roll/image.png" width="500" height="550" alt=""> <img src="C:/Users/Administrator/Pictures/Camera Roll/image.png" width="500" height="550" alt=""> </div> <style> slider { z-index:;} body{ background:linear-gradient(#222222, #444444,#555555); } .menu { max-width: 600px; } .menu a { display: block; padding: 15px; text-decoration: none; color: black; } label { width: 200px; display: block; margin: 0; padding : 15px; line-height: 1; color :#fff; background : #333; cursor :pointer; text-align:center; border-bottom:3px solid #2AC5B3; } input { display: none; } .menu ul { width: 230px; margin: 0px 0; padding: 0; background :#eae0d7; list-style: none; text-align:center; } .menu li { height: 0; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #change01:checked ~ #links01 li, #change02:checked ~ #links02 li { height: 54px; opacity: 1; } </style>
どう上手くいかないかはメニューバーが画像の裏に表示されて、見えないと書いてあると思います。
コードは1つのファイルに書いています。
imgで読んでる画像がローカルにある前提だと回答はきびしいです。
そもそもlocalhostでhttpdはなにか立てていますか？
回答1件
0
ベストアンサー
1：
<img>画像埋め込み要素
srcは画像の URL です。
URLとは
Uniform Resource Locator (URL) はインターネット上における(ウェブページや画像や動画といった)リソースの位置を特定するための文字列です。
C:\はURLじゃないです。
2：
demo1 {
position:fixed;
}
demo1は要素じゃありません。
id="demo1"のスタイルを変えたい場合は #demo1です。
３：
nav {
margin-top: 40px;
margin-left: 40px;
}
を
css
1nav { 2 margin-top: 40px; 3 margin-left: 40px; 4 position: fixed; 5 z-index: 999; 6}
に変えれば、メニューバーは画像の上に重なるはずです。
いじりすぎたかもしれませんが、コードはここです:JsFiddle-drfcut4e
投稿2021/12/03 08:17
総合スコア910
あなたの回答
tips
プレビュー
