投稿 ドロップダウンメニュー[レスポンシブ対応] は 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 に最初に表示されました。
]]>投稿 レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>
jQuery(function($){
//sp Menu
$(".Menubtn .open").click(function() {
$(".Sidenav").animate({
width: 'toggle'
}, 300);
$(this).css("display","none");
$(".Menubtn .close").css("display","block");
});
$(".Menubtn .close").click(function() {
$(".Sidenav").animate({
width: 'toggle'
}, 300);
$(this).css("display","none");
$(".Menubtn .open").css("display","block");
});
//IOS
//visible
$(function() {
var windowWidth = $(window).width();
var x = 740;
$(window).resize(function(){
var ww = $(window).width();
if(windowWidth != ww) {
if(ww >= x) {
$(".Sidenav").css("display","block");
$(".Menubtn ul li").css("display","none");
} else {
$(".Sidenav").css("display","none");
$(".Menubtn ul li.close").css("display","none");
$(".Menubtn ul li.open").css("display","block");
}
windowWidth = ww;
}
});
});
});
<div class="Menubtn">
<ul>
<li class="open"><a href="javascript:void(0)"><span>開く</span><i class="fa fa-bars" aria-hidden="true"></i></a></li>
<li class="close"><a href="javascript:void(0)"><span>閉まる</span><i class="fa fa-times" aria-hidden="true"></i></a></li>
</ul>
<!-- /.Menubtn --></div>
<div class="Sidenav">
<ul>
<li><a href="">第三階層下層あり</a>
<ul>
<li><a href="">第四階層下層あり</a>
<ul>
<li><a href="">第五階層タイトル</a></li>
<li><a href="">第五階層タイトル</a></li>
<li><a href="">現在地第五階層</a></li>
<li><a href="">第五階層タイトル</a></li>
</ul>
</li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
</ul>
</li>
<li><a href="">第三階層タイトル</a></li>
<li><a href="">第三階層下層あり</a>
<ul>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
</ul>
</li>
<li><a href="">第三階層タイトル</a></li>
<li><a href="">第三階層下層あり</a>
<ul>
<li><a href="">第四階層下層あり</a>
<ul>
<li><a href="">第五階層タイトル</a></li>
<li><a href="">第五階層タイトル</a></li>
<li><a href="">第五階層タイトル</a></li>
<li><a href="">第五階層タイトル</a></li>
</ul>
</li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
<li><a href="">第四階層タイトル</a></li>
</ul>
</li>
<!--1_end--></ul>
<!-- /.Sidenav --></div>
/* Menubtn
-----------------------------------------*/
.Menubtn ul li{
display: none;
}
@media screen and (max-width: 740px) {
.Menubtn{
display: block;
}
.Menubtn ul li a span{
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
.Menubtn ul li a{
position: absolute;
top:20px;
right: 20px;
color: #666;
font-size: 28px;
z-index: 99;
}
.Menubtn ul li.open{
display: block;
}
}
/* Sidenav
-----------------------------------------*/
.Sidenav{
float: left;
width:200px;
}
@media screen and (max-width: 740px) {
.Sidenav{
float: none;
width:100%;
position: absolute;
top:0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.9;
display: none;
box-sizing:border-box;
}
}
.Sidenav a:link {color:#000; text-decoration:none;}
.Sidenav a:visited {color:#000; text-decoration:none;}
.Sidenav a:hover {color:#000; text-decoration:none;}
.Sidenav a:active {color:#000; text-decoration:none;}
@media screen and (max-width: 740px) {
.Sidenav a:link {color:#FFF;}
.Sidenav a:visited {color:#FFF;}
.Sidenav a:hover {color:#FFF;}
.Sidenav a:active {color:#FFF;}
}
.Sidenav ul li a{
display: block;
line-height: 1.3;
font-size:12px;
padding:5px 5px 5px 10px;
}
.Sidenav ul li a:hover{
background-color: #EEE;
}
@media screen and (max-width: 740px) {
.Sidenav ul li a:hover{
background-color: transparent;
color:#2196f3;
}
}
.Sidenav ul li a:before{
margin:0 5px 0 0;
content: " \f054";
color:#2196f3;
font-family: FontAwesome;
}
.Sidenav ul{
padding:0 0 0 10px;
}
@media screen and (max-width: 740px) {
.Sidenav>ul{
padding: 80px 10px 50px 10px;
}
}
投稿 レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02 は CodingMania に最初に表示されました。
]]>投稿 レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。 は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/tool.js"></script>
$(function(){
//MENU
$(function(){
$(".mod_nav").each(function() {
var panelbtn=$(this).find(".navtitle");
var closebtn=$(this).find(".mod_nav_inner .closebtn");
var panelinner=$(this).find(".mod_nav_inner");
$(panelbtn).addClass("close");
//命令
$(function(){
$(panelbtn).click(function(){
if($(panelinner).css("display")=="none"){
$(panelinner).slideDown("fast").removeClass("close").addClass("open");
$(this).removeClass("close").addClass("open");}else{
$(panelinner).slideUp("fast").removeClass("open").addClass("close");
$(this).removeClass("open").addClass("close");
}
});
//close
$(closebtn).click(function(){
$(panelinner).slideUp("fast").removeClass("open").addClass("close");
$(panelbtn).removeClass("open").addClass("close");
});
});
});
});
//visible
$(function() {
var windowWidth = $(window).width();
$(window).resize(function(){
var ww = $(window).width();
if(windowWidth != ww) {
if($(".navtitle").css("display")=="none") {
$(".mod_nav_inner").css("display","block").removeClass("close").addClass("open");
} else {
$(".mod_nav_inner").css("display","none").removeClass("open").addClass("close");
}
windowWidth = ww;
}
});
});
});
<nav class="mod_nav"> <p class="navtitle"><i class="fa fa-bars"></i><span>MENU</span></p> <div class="mod_nav_inner"> <ul> <li class="current"><a href="#">ホーム</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">環境活動</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <p class="closebtn"><span><i class="fa fa-times-circle"></i>メニューを閉じる</span></p> <!-- /.mod_nav_inner --></div> <!-- /.mod_nav --></nav>
/* mod_nav
-----------------------------------------*/
.mod_nav {
padding: 30px 0 30px 0;
background-color: #FFF;
/* box-shadow */
-webkit-box-shadow: 0px 2px 4px #CCC;
-moz-box-shadow: 0px 2px 4px #CCC;
box-shadow: 0px 2px 4px #CCC;
}
@media screen and (max-width:768px) {
.mod_nav {
position:relative;
padding: 0;
height: 50px;
}
}
/* navtitle */
.mod_nav p.navtitle {
display: none;
}
@media screen and (max-width:768px) {
.mod_nav p.navtitle {
position:absolute;
top:8px;
left:10px;
display: block;
font-size:20px;
cursor:pointer;
}
.mod_nav p.navtitle i{
font-size:24px;
}
.mod_nav p.navtitle span{
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
}
/* mod_nav_inner */
.mod_nav_inner {
}
@media screen and (max-width:768px) {
.mod_nav_inner {
display:none;
position:relative;
top:45px;
left:0;
background-color:#FFF;
}
}
.mod_nav_inner ul {
margin: 0 20px 0 20px;
text-align: right;
}
@media screen and (max-width:768px) {
.mod_nav_inner ul {
margin: 0;
text-align: left;
border-top:solid 1px #CCC;
}
}
.mod_nav_inner ul li {
display: inline-block;
margin: 0 20px 0 20px;
}
@media screen and (max-width:768px) {
.mod_nav_inner ul li {
display: block;
margin:0;
border-bottom:solid 1px #CCC;
}
}
.mod_nav_inner ul li a {
display: block;
padding: 0 0 0 20px;
position: relative;
}
@media screen and (max-width:768px) {
.mod_nav_inner ul li a {
display: block;
padding: 15px 0 15px 40px;
}
}
.mod_nav_inner ul li a:before {
position: absolute;
margin-top: -8px;
top: 50%;
left: 4px;
color: #000;
content: " \f054";
font-family: FontAwesome;
}
@media screen and (max-width:768px) {
.mod_nav_inner ul li a:before {
left: 15px;
}
}
.mod_nav_inner ul li a:link {
color: #000;
text-decoration: none;
}
.mod_nav_inner ul li a:visited {
color: #000;
text-decoration: none;
}
.mod_nav_inner ul li a:hover, .mod_nav_inner ul li a:hover:before {
color: #009933;
text-decoration: none;
}
.mod_nav_inner ul li a:active, .mod_nav_inner ul li a:hover:before {
color: #009933;
text-decoration: none;
}
/* mod_nav_btn */
.mod_nav_inner p.closebtn {
display:none;
}
@media screen and (max-width:768px){
.mod_nav_inner p.closebtn{
display:block;
background-color:#000;
color:#FFF;
margin:0;
padding:10px;
line-height:1;
font-size:16px;
cursor:pointer;
text-align:center;
}
.mod_nav_inner p.closebtn i{
margin:0 5px 0 0;
}
}
投稿 レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。 は CodingMania に最初に表示されました。
]]>