投稿 WordPress のYouTube埋め込みの iframe をレスポンシブ対応する は CodingMania に最初に表示されました。
]]>
if ( is_single() ) {
wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js', array('jquery'), false, true );
}
jQuery(document).ready(function () {
$(function () {
$('iframe').each(function () {
let frame = $(this);
let div = document.createElement('div');
div.className = 'youtube';
if ((frame.is('[src*="youtube"]'))) {
$(this).wrap(div);
}
});
});
});
/* youtube
-----------------------------------------*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
投稿 WordPress のYouTube埋め込みの iframe をレスポンシブ対応する は CodingMania に最初に表示されました。
]]>投稿 フォームにある現在地を示すステップナビゲーション は CodingMania に最初に表示されました。
]]>
<div class="Stepnav">
<ol>
<li class="current">１<span>．製品情報入力</span></li>
<li>２<span>．問合せ情報入力</span></li>
<li>３<span>．お客様情報入力</span></li>
<li>４<span>．確認</span></li>
<li>５<span>．送信完了</span></li>
</ol>
<!-- /.Stepnav --></div>
/* Stepnav
-----------------------------------------*/
.Stepnav ol {
margin-top: 40px;
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
height: 48px;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
}
.Stepnav ol li {
position: relative;
display: table-cell;
box-sizing: border-box;
padding-left: 25px;
text-align: center;
vertical-align: middle;
color: #2196f3;
font-size: 14px;
background-color: #f9f9f9;
font-weight: bold;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.Stepnav ol li:first-child {
padding-left: 0;
}
@media screen and (max-width: 960px) {
.Stepnav ol li {
font-size: 12px;
}
}
.Stepnav ol li.current {
background-color: #2196f3;
color: #FFF;
}
@media screen and (max-width: 960px) {
.Stepnav ol li span {
display: none;
}
}
.Stepnav ol li:before {
content: "";
position: absolute;
top: -1px;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 24px solid #cccccc;
z-index: 99;
}
.Stepnav ol li:nth-child(5):before {
display: none;
}
.Stepnav ol li:after {
content: "";
position: absolute;
top: -1px;
right: -24px;
bottom: 0;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 24px solid #f9f9f9;
z-index: 99;
}
.Stepnav ol li:last-child:after {
display: none;
}
.Stepnav ol li.current {
border-top: solid 1px #2196f3;
border-bottom: solid 1px #2196f3;
}
.Stepnav ol li.current:after {
border-left: 24px solid #2196f3;
}
投稿 フォームにある現在地を示すステップナビゲーション は CodingMania に最初に表示されました。
]]>投稿 ドロップダウンメニュー[レスポンシブ対応] は CodingMania に最初に表示されました。
]]><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://codingmania.net/demo/Tool/0046/js/main.js"></script>
$(window).on('load orientationchange', function() {
setTimeout(function() {
var w = window.innerWidth;
var point = 1000;
if (w > point) {
//それ以外のときの処理
$("body").addClass("pc").removeClass("spn");
$(".Nav > ul").removeClass("open close").css("display", "block");
$(".Nav .navbtn a").removeClass("open close").html("<span>メニューを閉じる</span>");
} else {
//画面サイズが1000px未満のときの処理
$("body").addClass("spn").removeClass("pc");
$(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
$(".Nav .navbtn a").addClass("close").removeClass("open").html("<span>メニューを開く</span>");
}
}, 100);
});
//resize
$(window).resize(function() {
var windowWidth = window.innerWidth;
var point = 1000;
var timer = false;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
var ww = $(window).width();
if (windowWidth != ww) {
if (windowWidth > point) {
$("body").addClass("pc").removeClass("spn");
$(".Nav > ul").removeClass("open close").css("display", "block");
$(".Nav > ul > li").css("display","inline-block");
$(".Nav .navbtn a").removeClass("open close").html("<span>メニューを閉じる</span>");
$(".Nav ul li.parent a").removeClass("open").addClass("close");
$(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
} else { //画面サイズが1000px未満のときの処理
$("body").addClass("spn").removeClass("pc");
$(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
$(".Nav .navbtn a").addClass("close").removeClass("open").html("<span>メニューを開く</span>");
$(".Nav ul li.parent a").removeClass("open").addClass("close");
$(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
}
} else {}
}, 50);
});
//nav dropdown
$(function() {
$(".Nav ul li.parent a").each(function() {
var submenu = $(this).next("ul.submenu");
var samelevel = $(this).parent().siblings().find("ul.submenu");
var samelevelbtn = $(this).parent().siblings().find("a");
$(this).addClass("close");
$(submenu).addClass("close");
$(this).on('click', function() {
if ($(this).hasClass("open")) {
$(this).removeClass("open").addClass("close");
$(submenu).slideUp("fast").removeClass("open").addClass("close");
} else {
$(samelevel).slideUp("fast").removeClass("open").addClass("close");
$(samelevelbtn).removeClass("open").addClass("close");
$(submenu).slideDown("fast").removeClass("close").addClass("open");
$(this).removeClass("close").addClass("open");
}
//return false;
});
});
$(document).click(function(event) {
if (!$(event.target).closest(".Nav").length) {
$(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
$(".Nav ul li.parent a").removeClass("open").addClass("close");
//alert('changeイベントが発生しました。');
}
});
});
//SP nav
$(function() {
$(".Nav .navbtn a").click(function() {
if ($(".Nav > ul").css("display") == "none") {
$(".Nav > ul").addClass("open").removeClass("close").slideDown("fast");
$(".Nav > ul > li").css("display","block");
$(this).removeClass("close").addClass("open").html("<span>メニューを閉じる</span>");
} else {
$(".Nav > ul").addClass("close").removeClass("open").slideUp("fast");
$(".Nav ul li.parent").removeClass("open").addClass("close");
$(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
$(this).addClass("close").removeClass("open").html("<span>メニューを開く</span>");
}
});
});
//SP アンカーリンク
$(function() {
$("ul.submenu a[href^='#']").click(function(event) {
//alert('changeイベントが発生しました。');
$(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
$(".Nav ul li.parent a").removeClass("open").addClass("close");
$(".spn .Nav > ul").addClass("close").removeClass("open").slideUp("fast");
$(".spn .Nav .navbtn a").addClass("close").removeClass("open").html("<span>メニューを開く</span>");
//$(this).removeClass("close").addClass("open").html("<span>メニューを閉じる</span>");
});
});
<nav class="Nav" role="navigation" aria-label="メインメニュー"> <p class="navbtn"><a href="javascript:void(0)"><span>メニューを開く</span></a></p> <ul> <li><a href="">TOP</a></li> <li><a href="">メニューその１</a></li> <li class="parent"><a href="javascript:void(0)">ドロップダウンメニューその1</a> <ul class="submenu"> <li><a href="https://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="#A">アンカーリンク</a></li> <li class="parent"><a href="javascript:void(0)">更にドロップダウン2</a> <ul class="submenu"> <li><a href="">ドロップダウン3</a></li> <li><a href="">ドロップダウン3</a></li> <li><a href="">ドロップダウン3</a></li> </ul> </li> <li><a href="">ドロップダウン2</a></li> </ul> </li> <li class="parent"><a href="javascript:void(0)">ドロップダウンメニューその2</a> <ul class="submenu"> <li><a href="">ドロップダウン2</a></li> <li><a href="">ドロップダウン2</a></li> <li class="parent"><a href="javascript:void(0)">更にドロップダウン2</a> <ul class="submenu"> <li><a href="">ドロップダウン3</a></li> <li><a href="">ドロップダウン3</a></li> <li><a href="">ドロップダウン3</a></li> </ul> </li> <li><a href="">ドロップダウン2</a></li> </ul> </li> <li><a href="">メニューその2</a></li> <li><a href="">メニューその3</a></li> </ul> <!-- /.Nav --></nav>
/* Nav
-----------------------------------------*/
.Nav {
margin-top: 60px;
border-top: solid 1px #F5F4F0;
border-bottom: solid 1px #F5F4F0;
}
@media screen and (max-width: 1000px) {
.Nav {
position: relative;
border-top:none;
}
}
.Nav .navbtn {
display: none;
}
@media screen and (max-width: 1000px) {
.Nav .navbtn {
display: block;
position: absolute;
top: -50px;
right: 10px;
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a,
.Nav .navbtn a.close {
display: block;
position: relative;
width: 40px;
height: 40px;
background-color: #000;
}
.Nav .navbtn a::before,
.Nav .navbtn a.close::before {
position: absolute;
top:10px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #FFF;
transition: .2s;
}
.Nav .navbtn a.open::before {
top:19px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.Nav .navbtn a::after,
.Nav .navbtn a.close::after {
position: absolute;
bottom:10px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #FFF;
transition: .2s;
}
.Nav .navbtn a.open::after {
bottom:18px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a.open {
}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a span {
display: block;
overflow: hidden;
width: 1px;
height: 1px;
}
.Nav .navbtn a span::after,
.Nav .navbtn a.close span::after {
position: absolute;
top:18px;
left:10px;
content:"";
width: 20px;
height: 3px;
background-color: #FFF;
}
.Nav .navbtn a.open span::after {
display: none;
}
}
.Nav ul.close {
display: none;
border-top: solid 1px #F5F4F0;
}
.Nav > ul {
margin: 0 auto;
max-width: 1000px;
}
@media screen and (max-width: 1000px) {
.Nav > ul {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
background-color: #FFF;
}
}
.Nav > ul > li {
position: relative;
font-size: 15px;
display: inline-block;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li {
display: block;
border-bottom: solid 1px #dddddd;
}
}
.Nav > ul > li a {
display: block;
position: relative;
text-decoration: none;
padding: 19px 15px;
font-size: 15px;
color: #333;
background-color: #fff;
z-index: 2;
}
.Nav > ul > li.parent > a {
padding-right:25px;
}
.Nav > ul > li.parent > a::before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #00a0e9;
border-right: solid 2px #00a0e9;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open {
border-bottom: none;
}
}
.Nav > ul > li.parent.open > a{
color: #FFF;
}
.Nav > ul > li.parent.open > a::after {
background: #333;
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a {
color: #FFF;
}
}
.Nav > ul > li a:hover {
color: #fff;
}
.Nav > ul > li a::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.Nav > ul > li a::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.Nav > ul > li a:hover::after {
background: #333;
-webkit-transform: scale(1);
transform: scale(1);
}
/* 2階層 */
.Nav > ul > li > ul {
display: none;
position: absolute;
top: 53px;
left: 0;
width: auto;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul {
background-color: #fbfbfb;
position: static;
}
}
.Nav > ul > li > ul li {
white-space: nowrap;
}
.Nav > ul > li > ul li a {
position: relative;
padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul li a {
border-bottom: solid 1px #dddddd;
background-color: #EEE;
}
}
.Nav > ul > li > ul li a::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #00a0e9;
border-right: solid 2px #00a0e9;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.Nav > ul > li > ul li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul li a:hover {
background-color: #FFF;
}
}
.Nav > ul > li > ul li ul li a {
padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
left: 20px;
}
投稿 ドロップダウンメニュー[レスポンシブ対応] は CodingMania に最初に表示されました。
]]>投稿 横からスライドインするレスポンシブ対応メニュー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://codingmania.net/demo/form/0014/js/main.js"></script>
$(function(){
//メニュー
//SET
if($(".Header__btn").css("display") == "block") {
windowWidth = $(window).width();
$(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
}
//risize
var setwidth = $(window).width();
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
var ww = $(window).width();
windowWidth = $(window).width();
if(windowWidth == setwidth){
}else if(windowWidth<640){
$(".Header__btn p").addClass("close").removeClass("open");
$(".Header__btn p img").attr("src","common/img/icon_menu.png");
$(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
}else{
$(".Globalnav").css({"margin":"0 auto", "width":950});
};
}, 50);
});
//orientationchange
$(function(){
var timer = false;
//$(window).on("orientationchange", function() {
$(window).on("orientationchange", function() {
if(timer !== false){
clearTimeout(timer);
}
timer = setTimeout(function() {
//window.onorientationchange = function(){
windowWidth = $(window).width();
//alert(windowWidth);
if(windowWidth<640){
$(".Header__btn p").addClass("close").removeClass("open");
$(".Header__btn p img").attr("src","common/img/icon_menu.png");
$(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
}else{
$(".Globalnav").css({"margin":"0 auto", "width":950});
}
}, 1);
});
});
//click
$(".Header__btn p").click(function() {
if($(this).hasClass("open")) {
$(this).addClass("close").removeClass("open");
//var windowWidth = $(window).width();
$(".Header__btn p img").attr("src","common/img/icon_menu.png");
$(".Globalnav").animate({"marginLeft":windowWidth+"px"},500);
//alert(windowWidth);
} else {
$(this).addClass("open").removeClass("close");
$(".Header__btn p img").attr("src","common/img/icon_menu-close.png");
$(".Globalnav").animate({"marginLeft":"0px"},500);
}
});
});
<header class="Header" role="banner"> <div class="Header__btn"> <p><a href="javascript:void(0)"><span>メニューを開く</span></a></p> <!-- /.Header__btn --></div> <nav class="Globalnav" role="navigation" aria-label="メインメニュー"> <ul> <li class="current"><a href="#">TOPページ</a></li> <li><a href="#">メニューその1</a></li> <li><a href="#">メニューその2</a></li> <li><a href="#">メニューその3</a></li> <li><a href="#">メニューその4</a></li> <li><a href="#">メニューその5</a></li> </ul> <!-- /.Globalnav --></nav> <!-- /.Header --></header>
/* Header
-----------------------------------------*/
@media screen and (max-width: 640px) {
.Header{
position: relative;
height: 50px;
}
}
.Header__btn{
display: none;
}
@media screen and (max-width: 640px) {
.Header__btn{
position: absolute;
top:0px;
right: 0px;
display: block;
background-color: #489fdf;
}
.Header__btn p a{
display: block;
width: 50px;
height: 50px;
}
.Header__btn p a:after {
position: absolute;
display: block;
content: " \f0c9";
font-family: FontAwesome;
width: 50px;
height: 50px;
top: 14px;
left:0;
right: 0;
font-size: 22px;
color: #FFF;
text-align: center;
}
.Header__btn p.open a:after {
content: " \f00d";
}
.Header__btn span{
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
}
/* Globalnav
-----------------------------------------*/
@media screen and (max-width: 640px) {
body {
overflow: hidden;
}
}
.Globalnav {
margin: 0 auto;
width: 950px;
}
@media screen and (max-width: 640px) {
.Globalnav {
width: auto;
}
}
@media screen and (max-width: 640px) {
.Globalnav {
display: none;
position: absolute;
top: 50px;
left: 0;
margin-left: 320px;
width: 320px;
z-index: 9999;
background-color: #489fdf;
}
}
.Globalnav ul {
display: table;
width: 100%;
}
@media screen and (max-width: 640px) {
.Globalnav ul {
display:block;
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
}
}
.Globalnav ul li {
display: table-cell;
}
@media screen and (max-width: 640px) {
.Globalnav ul li {
display: block;
margin: 0;
border-bottom: solid 1px #FFF;
}
.Globalnav ul li:last-child{
border-bottom: none;
}
}
.Globalnav ul li a {
display: block;
text-align: center;
padding: 20px 0;
color: #000;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 3px #FFF;
}
@media screen and (max-width: 640px) {
.Globalnav ul li a {
position: relative;
padding: 15px 0;
font-size: 14px;
border: none;
color: #FFF;
text-align: left;
}
}
@media screen and (max-width: 640px) {
.Globalnav ul li a:after {
position: absolute;
content: " \f105";
font-family: FontAwesome;
width: 20px;
height: 7px;
top: 50%;
margin-top: -10px;
right: 0;
}
}
.Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
border-bottom: solid 3px #489fdf;
color: #489fdf;
}
@media screen and (max-width: 640px) {
.Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
border-bottom: none;
color: #FFF;
}
}
投稿 横からスライドインするレスポンシブ対応メニュー は CodingMania に最初に表示されました。
]]>