質問編集履歴

ソース不要と思われる部分を削除しました

2018/04/21 07:42

投稿

us5

スコア6

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -26,12 +26,6 @@
 	margin: 0;
 }
-body {
-	color: #000;
-	font: 15px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
-	background-color: #f5f5f5;
-	text-align: left;
-}
 ol, ul {
 	list-style: none;
@@ -45,6 +39,8 @@
 /**
  * base
  */
 .wrapper {
 	width: 100%;
 	height: 100vh;
@@ -53,64 +49,15 @@
 	background: #BED6E6;
 }
 .contents {
 	width: 100%;
 	height: 100%;
 }
-.contents__inner {
-	box-sizing: border-box;
-	width: 100%;
-	margin: 0 auto;
-	padding: 50px 24px;
-	color: #fff;
-}
-.contents__inner h1 {
-	margin-bottom: 30px;
-	font-size: 20px;
-	font-weight: bold;
-}
 /**
- * btn
- */
-.btn__box {
-	width: 250px;
-	height: 50px;
-	line-height: 50px;
-	margin: 100px auto 0;
-	font-size: 13px;
-}
-.btn__box a {
-	position: relative;
-	display: block;
-	color: #666;
-	background: #fff;
-}
-.btn__box a:before {
-	content: '';
-	position: absolute;
-	top: -5px;
-	left: -5px;
-	box-sizing: border-box;
-	width: 250px;
-	height: 50px;
-	border: 1px solid #666;
-	-webkit-transition: all .5s ease;
-	transition: all .5s ease;
-}
-.btn__box a:hover:before {
-	-webkit-transform: translate(10px, 10px);
-	transform: translate(10px, 10px);
-}
-/**
  * menu
  */
 .menu {
@@ -138,47 +85,14 @@
 	color: #999;
 }
-.menu__none:hover,
-.menu__multi:hover,
 .menu__mega:hover,
-.menu__single:hover {
   background: #072A24;
   -webkit-transition: .2s ease;
   transition: .2s ease;
 }
-.menu__second-level li {
-  border-top: 1px solid #111;
-}
-.menu__third-level li {
-  border-top: 1px solid #111;
-}
-.menu__second-level li a:hover {
-  background: #111;
-}
-.menu__third-level li a:hover {
-  background: #2a1f1f;
-}
-.menu__fourth-level li a:hover {
-  background: #1d0f0f;
-}
-.init-bottom:after {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin: 0 0 0 15px;
-  border-right: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
 .menu:before,
 .menu:after {
   content: "";
@@ -194,120 +108,8 @@
 }
-/**
- * single menu
- */
-.menu > .menu__single {
-  position: relative;
-}
-.menu__single .menu__second-level {
-  position: absolute;
-  top: 40px;
-  width: 100%;
-  background: #072A24;
-  -webkit-transition: .2s ease;
-  transition: .2s ease;
-  visibility: hidden;
-  opacity: 0;
-}
-.menu__single:hover > .menu__second-level {
-  top: 50px;
-  visibility: visible;
-  opacity: 1;
-}
 /**
- * multi menu
- */
-.menu > .menu__multi {
-  position: relative;
-}
-.menu__multi .menu__second-level {
-  position: absolute;
-  top: 40px;
-  width: 100%;
-  background: #072A24;
-  -webkit-transition: all .2s ease;
-  transition: all .2s ease;
-  visibility: hidden;
-  opacity: 0;
-  z-index: 1;
-}
-.menu__multi:hover .menu__second-level {
-  top: 50px;
-  visibility: visible;
-  opacity: 1;
-}
-.menu__multi .menu__second-level li {
-  position: relative;
-}
-.menu__multi .menu__second-level li:hover {
-  background: #111;
-}
-.menu__multi .menu__second-level li .menu__third-level {
-  position: absolute;
-  top: -1px;
-  left: 100%;
-  width: 100%;
-  background: #111;
-  -webkit-transition: all .2s ease;
-  transition: all .2s ease;
-  visibility: hidden;
-  opacity: 0;
-}
-.menu__multi .menu__second-level li:hover .menu__third-level {
-  visibility: visible;
-  opacity: 1;
-}
-.menu__multi .menu__second-level li .menu__third-level li {
-  position: relative;
-}
-.menu__multi .menu__second-level li .menu__third-level li:hover {
-  background: #2a1f1f;
-}
-.menu__multi .menu__second-level li .menu__third-level li .menu__fourth-level {
-  position: absolute;
-  top: -1px;
-  left: 100%;
-  width: 100%;
-  background: #2a1f1f;
-  -webkit-transition: all .2s ease;
-  transition: all .2s ease;
-  visibility: hidden;
-  opacity: 0;
-}
-.menu__multi .menu__second-level li .menu__third-level li:hover .menu__fourth-level {
-  visibility: visible;
-  opacity: 1;
-}
-.init-right:after {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin: 0 0 0 15px;
-  border-right: 1px solid #fff;
-  border-top: 1px solid #fff;
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-/**
  * mega menu
  */
 .menu__mega .menu__second-level {
@@ -340,6 +142,7 @@
 .menu__mega .menu__second-level > li:nth-child(3n+2) {
   margin: 0 1%;
 }
 </style>

ソースを記載

2018/04/21 07:42

投稿

us5

スコア6

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,7 +1,356 @@
+<style>
+@charset "UTF-8";
+/**
+ * reset
+ */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	font-weight: normal;
+	font-style: normal;
+	vertical-align: baseline;
+	background: transparent;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
+	display: block;
+	margin: 0;
+}
+body {
+	color: #000;
+	font: 15px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
+	background-color: #f5f5f5;
+	text-align: left;
+}
+ol, ul {
+	list-style: none;
+}
+a {
+  text-decoration: none;
+}
+/**
+ * base
+ */
+.wrapper {
+	width: 100%;
+	height: 100vh;
+	text-align: center;
+	font-size: 13px;
+	background: #BED6E6;
+}
+.contents {
+	width: 100%;
+	height: 100%;
+}
+.contents__inner {
+	box-sizing: border-box;
+	width: 100%;
+	margin: 0 auto;
+	padding: 50px 24px;
+	color: #fff;
+}
+.contents__inner h1 {
+	margin-bottom: 30px;
+	font-size: 20px;
+	font-weight: bold;
+}
+/**
+ * btn
+ */
+.btn__box {
+	width: 250px;
+	height: 50px;
+	line-height: 50px;
+	margin: 100px auto 0;
+	font-size: 13px;
+}
+.btn__box a {
+	position: relative;
+	display: block;
+	color: #666;
+	background: #fff;
+}
+.btn__box a:before {
+	content: '';
+	position: absolute;
+	top: -5px;
+	left: -5px;
+	box-sizing: border-box;
+	width: 250px;
+	height: 50px;
+	border: 1px solid #666;
+	-webkit-transition: all .5s ease;
+	transition: all .5s ease;
+}
+.btn__box a:hover:before {
+	-webkit-transform: translate(10px, 10px);
+	transform: translate(10px, 10px);
+}
+/**
+ * menu
+ */
+.menu {
+	position: relative;
+	width: 100%;
+	height: 50px;
+	max-width: 1000px;
+	margin: 0 auto;
+}
+.menu > li {
+	float: left;
+	width: 25%;
+	height: 50px;
+	line-height: 50px;
+	background: rgb(29, 33, 19);
+}
+.menu > li a {
+	display: block;
+	color: #fff;
+}
+.menu > li a:hover {
+	color: #999;
+}
+.menu__none:hover,
+.menu__multi:hover,
+.menu__mega:hover,
+.menu__single:hover {
+  background: #072A24;
+  -webkit-transition: .2s ease;
+  transition: .2s ease;
+}
+.menu__second-level li {
+  border-top: 1px solid #111;
+}
+.menu__third-level li {
+  border-top: 1px solid #111;
+}
+.menu__second-level li a:hover {
+  background: #111;
+}
+.menu__third-level li a:hover {
+  background: #2a1f1f;
+}
+.menu__fourth-level li a:hover {
+  background: #1d0f0f;
+}
+.init-bottom:after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 0 0 15px;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.menu:before,
+.menu:after {
+  content: "";
+  display: table;
+}
+.menu:after {
+  clear: both;
+}
+.menu {
+  *zoom: 1;
+}
+/**
+ * single menu
+ */
+.menu > .menu__single {
+  position: relative;
+}
+.menu__single .menu__second-level {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  background: #072A24;
+  -webkit-transition: .2s ease;
+  transition: .2s ease;
+  visibility: hidden;
+  opacity: 0;
+}
+.menu__single:hover > .menu__second-level {
+  top: 50px;
+  visibility: visible;
+  opacity: 1;
+}
+/**
+ * multi menu
+ */
+.menu > .menu__multi {
+  position: relative;
+}
+.menu__multi .menu__second-level {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  background: #072A24;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 1;
+}
+.menu__multi:hover .menu__second-level {
+  top: 50px;
+  visibility: visible;
+  opacity: 1;
+}
+.menu__multi .menu__second-level li {
+  position: relative;
+}
+.menu__multi .menu__second-level li:hover {
+  background: #111;
+}
+.menu__multi .menu__second-level li .menu__third-level {
+  position: absolute;
+  top: -1px;
+  left: 100%;
+  width: 100%;
+  background: #111;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  visibility: hidden;
+  opacity: 0;
+}
+.menu__multi .menu__second-level li:hover .menu__third-level {
+  visibility: visible;
+  opacity: 1;
+}
+.menu__multi .menu__second-level li .menu__third-level li {
+  position: relative;
+}
+.menu__multi .menu__second-level li .menu__third-level li:hover {
+  background: #2a1f1f;
+}
+.menu__multi .menu__second-level li .menu__third-level li .menu__fourth-level {
+  position: absolute;
+  top: -1px;
+  left: 100%;
+  width: 100%;
+  background: #2a1f1f;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  visibility: hidden;
+  opacity: 0;
+}
+.menu__multi .menu__second-level li .menu__third-level li:hover .menu__fourth-level {
+  visibility: visible;
+  opacity: 1;
+}
+.init-right:after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 0 0 15px;
+  border-right: 1px solid #fff;
+  border-top: 1px solid #fff;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/**
+ * mega menu
+ */
+.menu__mega .menu__second-level {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 20px 2%;
+  background: #072A24;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 1;
+}
+.menu__mega:hover .menu__second-level {
+  top: 50px;
+  visibility: visible;
+  opacity: 1;
+}
+.menu__mega .menu__second-level > li {
+  float: left;
+  width: 32%;
+  border: none;
+}
+.menu__mega .menu__second-level > li:nth-child(3n+2) {
+  margin: 0 1%;
+}
+</style>
 アイフォンでのif内のメニューの正常な動作
+すみません修正させていただきました
-https://theorthodoxworks.com/demo/201502/demo-drop-down-menu-multi-css.html
+[https://theorthodoxworks.com/demo/201502/demo-drop-down-menu-multi-css.html](https://theorthodoxworks.com/demo/201502/demo-drop-down-menu-multi-css.html)
-こちらのサイトのドロップダウンメニューを使用させていただこうと思ってるのですが
+こちらのサイトのドロップダウンメニューをインラインフレーム内で使用させていただこうと思ってるのですが
-インラインフレームでスマートフォンのアイフォンでＰＣ表示にした場合動作しないのですが
+ＰＣでは正常に動作するのですがスマートフォンのアイフォンでＰＣ表示にした場合動作しないのですが
 どのようにしたらよいのか教えていただきたいのですが宜しくお願い致します。
 （アンドロイドでは動作しました）