質問編集履歴

4 s

abouch

abouch score 13

2016/10/23 22:17  投稿

メガドロップメニューの作り方
###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
```
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、そのメニューにカーソルを乗せようとすると
消えてしまいます。
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、コンテンツとドロップされたメニューのちょうど境界部分にカーソルが乗るとドロップされたメニューが消えてしまいます。
どのようにすればよくあるホームページのメガドロップメニューに近づけられるのでしょうか
```
###該当のソースコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{
 padding: 50px;
 text-align: center;
}
#tem{
border: 1px black solid;
}
#flame{
border: 5px lime solid;
}
#tem{
 margin:0px;
}
#text,#text1,#text2{
 display: none;
}
.about{
text-align:center;
font-size:14px;
background-color:#4200B7;
color:#fff;
width:105px;
height:55px;
padding-top: 4px;
display:inline-block;
}
.about:hover{
opacity: 0.8
}
.drop{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: violet;
 border: 1px blue solid;
}
.drop1{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: orange;
 border: 1px blue solid;
}
.drop2{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: lime;
 border: 1px blue solid;
}
</style>
<body>
<div id="flame">
 <ul id="tem">
 <li class="about" onmouseover=drop('text') onmouseout=nones() >コンテンツ</li>
 <li class="about" onmouseover=drop('text1') onmouseout=nones()>コンテンツ</li>
 <li class="about" onmouseover=drop('text2') onmouseout=nones()>コンテンツ</li>
 </ul>
 <div id=text class="drop" onmouseover=drop('text') onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseover=drop('text1') onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseover=drop('text2') onmouseout=nones()>
   <p>テキスト2</p>
 </div>
</div>
<script>
function drop(text){
  document.getElementById('text').style.display='none';
  document.getElementById('text1').style.display='none';
  document.getElementById('text2').style.display='none';
  document.getElementById(text).style.display='inline-block';
}
function nones(){
 document.getElementById('text').style.display='none';
 document.getElementById('text1').style.display='none';
 document.getElementById('text2').style.display='none';
}
</script>
</body>
</html>
```
###試したこと
 ```
とりあえず以下のようにするとそれとなく動くのですが
コンテンツとドロップされたメニューのちょうど境界部分にカーソルが乗ると不具合がおこります。
修正の検討がつかず、困っております。
  • CSS

    8946 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3 s

abouch

abouch score 13

2016/10/23 22:14  投稿

メガドロップメニューの作り方
###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
```
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、そのメニューにカーソルを乗せようとすると
消えてしまいます。
```
###該当のソースコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{
 padding: 50px;
 text-align: center;
}
#tem{
border: 1px black solid;
}
#flame{
border: 5px lime solid;
}
#tem{
 margin:0px;
}
#text,#text1,#text2{
 display: none;
}
.about{
text-align:center;
font-size:14px;
background-color:#4200B7;
color:#fff;
width:105px;
height:55px;
padding-top: 4px;
display:inline-block;
}
.about:hover{
opacity: 0.8
}
.drop{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: violet;
 border: 1px blue solid;
}
.drop1{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: orange;
 border: 1px blue solid;
}
.drop2{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: lime;
 border: 1px blue solid;
}
</style>
<body>
<div id="flame">
 <ul id="tem">
 <li class="about" onmouseover=drop('text') >コンテンツ</li>
 <li class="about" onmouseover=drop('text1')>コンテンツ</li>
 <li class="about" onmouseover=drop('text2')>コンテンツ</li>
 <li class="about" onmouseover=drop('text') onmouseout=nones() >コンテンツ</li>
 <li class="about" onmouseover=drop('text1') onmouseout=nones()>コンテンツ</li>
 <li class="about" onmouseover=drop('text2') onmouseout=nones()>コンテンツ</li>
 </ul>
 <div id=text class="drop" onmouseout=nones()>
 <div id=text class="drop" onmouseover=drop('text') onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseout=nones()>
 <div id=text1 class="drop1" onmouseover=drop('text1') onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseout=nones()>
 <div id=text2 class="drop2" onmouseover=drop('text2') onmouseout=nones()>
   <p>テキスト2</p>
 </div>
</div>
<script>
function drop(text){
  document.getElementById('text').style.display='none';
  document.getElementById('text1').style.display='none';
  document.getElementById('text2').style.display='none';
  document.getElementById(text).style.display='inline-block';
}
function nones(){
 document.getElementById('text').style.display='none';
 document.getElementById('text1').style.display='none';
 document.getElementById('text2').style.display='none';
}
</script>
</body>
</html>
```
###試したこと
 ```
<div id=text class="drop" onmouseover=drop('text') onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseover=drop('text1') onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseover=drop('text2') onmouseout=nones()>
   <p>テキスト2</p>
 </div>
```
とりあえず以下のようにするとそれとなく動くのですが
なぜこの追記をしなければならないのかがわからないと、これからの作業が進みません
コンテンツとドロップされたメニューのちょうど境界部分にカーソルが乗ると不具合がおこります。
修正の検討がつかず、困っております。
  • CSS

    8946 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2

abouch

abouch score 13

2016/10/23 22:10  投稿

メガドロップメニューの作り方
###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
```
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、そのメニューにカーソルを乗せようとすると
消えてしまいます。
```
 
###該当のソースコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{
 padding: 50px;
 text-align: center;
}
#tem{
border: 1px black solid;
}
#flame{
border: 5px lime solid;
}
#tem{
 margin:0px;
}
#text,#text1,#text2{
 display: none;
}
.about{
text-align:center;
font-size:14px;
background-color:#4200B7;
color:#fff;
width:105px;
height:55px;
padding-top: 4px;
display:inline-block;
}
.about:hover{
opacity: 0.8
}
.drop{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: violet;
 border: 1px blue solid;
}
.drop1{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: orange;
 border: 1px blue solid;
}
.drop2{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: lime;
 border: 1px blue solid;
}
</style>
<body>
<div id="flame">
 <ul id="tem">
 <li class="about" onmouseover=drop('text') >コンテンツ</li>
 <li class="about" onmouseover=drop('text1')>コンテンツ</li>
 <li class="about" onmouseover=drop('text2')>コンテンツ</li>
 </ul>
 <div id=text class="drop" onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseout=nones()>
   <p>テキスト2</p>
 </div>
</div>
<script>
function drop(text){
  document.getElementById('text').style.display='none';
  document.getElementById('text1').style.display='none';
  document.getElementById('text2').style.display='none';
  document.getElementById(text).style.display='inline-block';
}
function nones(){
 document.getElementById('text').style.display='none';
 document.getElementById('text1').style.display='none';
 document.getElementById('text2').style.display='none';
}
</script>
</body>
</html>
```
```
###試したこと
  ```
<div id=text class="drop" onmouseover=drop('text') onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseover=drop('text1') onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseover=drop('text2') onmouseout=nones()>
   <p>テキスト2</p>
 </div>
```
とりあえず以下のようにするとそれとなく動くのですが
なぜこの追記をしなければならないのかがわからないと、これからの作業が進みません
  • CSS

    8946 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 resume

abouch

abouch score 13

2016/10/23 22:03  投稿

メガドロップメニューの作り方
###前提・実現したいこと
多くホームページで用いられているメガドロップメニューを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
```
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、そのメニューにカーソルを乗せようとすると消えてしまいます。
とりあえずコンテンツにmouseoverするとメニューがドロップするのですが、そのメニューにカーソルを乗せようとすると
消えてしまいます。
```
###該当のソースコード
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body{
 padding: 50px;
 text-align: center;
}
#tem{
border: 1px black solid;
}
#flame{
border: 5px lime solid;
}
#tem{
 margin:0px;
}
#text,#text1,#text2{
 display: none;
}
.about{
text-align:center;
font-size:14px;
background-color:#4200B7;
color:#fff;
width:105px;
height:55px;
padding-top: 4px;
display:inline-block;
}
.about:hover{
opacity: 0.8
}
.drop{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: violet;
 border: 1px blue solid;
}
.drop1{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: orange;
 border: 1px blue solid;
}
.drop2{
 width:700px;
 height:130px;
 display: inline-block;
 background-color: lime;
 border: 1px blue solid;
}
</style>
<body>
<div id="flame">
 <ul id="tem">
 <li class="about" onmouseover=drop('text') >コンテンツ</li>
 <li class="about" onmouseover=drop('text1')>コンテンツ</li>
 <li class="about" onmouseover=drop('text2')>コンテンツ</li>
 </ul>
 <div id=text class="drop" onmouseout=nones()>
   <p>テキスト</p>
 </div>
 <div id=text1 class="drop1" onmouseout=nones()>
   <p>テキスト1</p>
 </div>
 <div id=text2 class="drop2" onmouseout=nones()>
   <p>テキスト2</p>
 </div>
</div>
<script>
function drop(text){
  document.getElementById('text').style.display='none';
  document.getElementById('text1').style.display='none';
  document.getElementById('text2').style.display='none';
  document.getElementById(text).style.display='inline-block';
}
function nones(){
 document.getElementById('text').style.display='none';
 document.getElementById('text1').style.display='none';
 document.getElementById('text2').style.display='none';
}
</script>
</body>
</html>
```
  • CSS

    8946 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る