ナビゲーションアーカイブ - CodingMania

ドロップダウンメニュー[レスポンシブ対応]

yotigory — Thu, 01 Mar 2018 04:28:09 +0000

JSを読み込みます

JavaScript[main.js]

$(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("メニューを閉じる");
    } else {
      //画面サイズが1000px未満のときの処理
      $("body").addClass("spn").removeClass("pc");
      $(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
      $(".Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
    }
  }, 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("メニューを閉じる");
        $(".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("メニューを開く");
        $(".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("メニューを閉じる");
    } 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("メニューを開く");
    }
  });
});

//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("メニューを開く");
    //$(this).removeClass("close").addClass("open").html("メニューを閉じる");
  });
});

HTMl


メニューを開く

  TOP
  メニューその１
  ドロップダウンメニューその1

  Yahoo
  アンカーリンク
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  ドロップダウンメニューその2

  ドロップダウン2
  ドロップダウン2
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  メニューその2
  メニューその3

CSS

/* 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 に最初に表示されました。

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02

yotigory — Mon, 09 May 2016 06:17:15 +0000

JSを読み込みます

[main.js]JavaScript

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;
}
});
});
 
  });

HTMl



  開く
  閉まる





第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        現在地第五階層
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル

CSS

/* 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 に最初に表示されました。

現在地表示をするドロップダウン式サイドナビ

yotigory — Fri, 29 Jan 2016 08:54:50 +0000

JSを読み込みます

[main.js]JavaScript

jQuery(function($){
	//sidenav_current_class
  $(function(){
  var id = $(".mod_section_box_side_nav").attr("id");
  $(".mod_section_box_side_nav ul li."+id).addClass("current");
  });
	
  //sidenav_dropdown
  $(function(){
		var nav = $(".mod_section_box_side_nav");
		var navlink = nav.find("ul li a");
		$(navlink).each(function() {
			if($("+ul",this).size()){
			$(this).addClass("parent");
			}else{
			}
		});
		
		var navlinkbtn = nav.find("ul li a.parent");
		$("+ul",navlinkbtn).css("display","none");
		
		var navlink_current = nav.find("ul li.current");
		$(navlink_current).parents("ul").css("display","block");
		
		
    $(navlinkbtn).click(function(){
      //alert('クリック！');
				if($("+ul",this).css("display")=="none"){
				$("+ul",this).slideDown("fast");
				}else{
				$("+ul",this).slideUp("fast");
				}
				return false;
     });
	});
	
	
	});

HTMl



第二階層タイトル

第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        現在地第五階層
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル

CSS

/* mod_section_box_side_nav
-----------------------------------------*/
.mod_section_box_side_nav{
 width:200px;
  border: solid 1px #2196f3;
  /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.mod_section_box_side_nav  a:link    {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:visited {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:hover   {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:active  {color:#000; text-decoration:none;}
 
.mod_section_box_side_nav p.category{
  display: table;
  margin:0;
  width: 100%;
  font-size: 115%;
}
.mod_section_box_side_nav p.category a{
  text-align: center;
  background-color: #2196f3;
  color: #FFF;
  display: table-cell;
  vertical-align: middle;
  height: 50px;
}
.mod_section_box_side_nav ul li a{
  display: block;
  line-height: 1.3;
}
/* current */
.mod_section_box_side_nav ul li.current>a{
  background-color:#cde9ff;
}
.mod_section_box_side_nav ul li a:hover{
  background-color:#cde9ff;
}
/* 3 */
.mod_section_box_side_nav>ul>li>a{
  font-size: 107%;
  border-top: solid 1px #2196f3;
  padding:16px 5px 14px 15px;
}
.mod_section_box_side_nav>ul>li>a:before{
  margin:0 5px 0 0;
	content: " \f054";
   color:#2196f3;
	font-family: FontAwesome;
}
/* 4 */
.mod_section_box_side_nav>ul>li>ul>li>a{
  border-top: solid 1px #c7c7c7;
  padding: 10px 5px 7px 15px;
  color: #292929;
}
.mod_section_box_side_nav>ul>li>ul>li>a:before{
  margin:0 5px 0 0;
	content: " \f101";
  color:#2196f3;
	font-family: FontAwesome;
}
.mod_section_box_side_nav>ul>li>ul>li:first-child>a{
  border-top: solid 1px #2196f3;
}
/* 5 */
.mod_section_box_side_nav>ul>li>ul>li>ul>li:first-child>a{
  border-top: dotted 1px #a1a1a1;
}
.mod_section_box_side_nav>ul>li>ul>li>ul>li>a{
  padding:10px 5px 6px 18px;
  color: #292929;
}
.mod_section_box_side_nav>ul>li>ul>li>ul>li>a:before{
  margin:0 5px 0 0;
  color:#2196f3;
	content: " \f105";
	font-family: FontAwesome;
}

投稿現在地表示をするドロップダウン式サイドナビは CodingMania に最初に表示されました。

クリックで表示する吹き出し型ドロップダウンメニュー

yotigory — Fri, 13 Jun 2014 05:32:21 +0000

JSを読み込みます

[dropdown.js]JavaScript

$(function(){

//global nav
 var btn = $(".mod_dropnavi ul li.parent");
 var submenu = $(".mod_dropnavi_child");
 var submenulink = $(".mod_dropnavi_child ul li a");
	//click
	$(btn).bind("click", "focus", function(event){
     var shownav = $(this).find(".mod_dropnavi_child");
    if($(shownav).css("display")=="none"){
		$(shownav).slideDown("fast");
    }else{
		$(shownav).slideUp("fast");
   }
 });
  //hover
	$(btn).hover(function () {
 	},
  	function () {
    	$(submenu).slideUp("fast");
  });
});

HTMl



Menu01
Menu02
  
  
  Menu02_Aのタイトルが長い場合
  Menu02_B
  Menu02_C
  
  

Menu03
Menu04
  
  
  Menu04_A
  Menu04_B
  Menu04_C
  Menu04_D

CSS

/* drop down
-----------------------------------------*/
/* link */
.mod_dropnavi ul li a{
  transition-property: border;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.mod_dropnavi ul li a:link    {text-decoration:none;}
.mod_dropnavi ul li a:visited {text-decoration:none;}
.mod_dropnavi ul li a:hover   {text-decoration:none;}
.mod_dropnavi ul li a:active  {text-decoration:none;}

/* mod_dropnavi */
.mod_dropnavi>ul{
	width:920px;
	height:45px;
  border-bottom:solid 3px #003700;
	background-color:#336600;
}
.mod_dropnavi>ul>li{
	width:150px;
	float:left;
	position:relative;
	text-align:center;
	line-height:45px;
	border-right:solid 1px #003700;
}
.mod_dropnavi>ul>li>a{
	display:block;
	color:#FFFFFF;
	font-weight:bold;
  border-bottom:solid 3px #003700;
}
.mod_dropnavi>ul>li>a:hover   {border-bottom:solid 3px #336600;}
.mod_dropnavi>ul>li>a:active  {border-bottom:solid 3px #336600;}

/* mod_dropnavi_child */
.mod_dropnavi .mod_dropnavi_child{
  display:none;
  position:absolute;
  top:48px;
  left:0px;
  z-index:99;
  padding:12px 0 0 0!important;
	background:transparent url('img/icon_arrow_01.png') no-repeat 10px 0px!important;
}
.mod_dropnavi .mod_dropnavi_child ul{
 padding:4px 27px 16px 27px!important;
 background-color:#003700;
}
.mod_dropnavi .mod_dropnavi_child ul li{
 font-size:90%;
 line-height:1.3;
 text-align:left;
 margin:12px 0 0 0!important;
 white-space:nowrap;
}
.mod_dropnavi .mod_dropnavi_child ul li a{
  padding:0 0 0 12px!important;
  display:inline-block;
	background:transparent url('img/icon_arrow_02.png') no-repeat left 5px!important;
}
.mod_dropnavi .mod_dropnavi_child ul li a:link    {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:visited {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:hover   {color:#FFF; text-decoration:underline;}
.mod_dropnavi .mod_dropnavi_child ul li a:active  {color:#FFF; text-decoration:underline;}

投稿クリックで表示する吹き出し型ドロップダウンメニューは CodingMania に最初に表示されました。

jQueryで簡単にページ送りを自動で表示します。

yotigory — Wed, 04 Jun 2014 06:08:45 +0000

JSを読み込みます

[pagenav.js]JavaScript

$(function(){
	
// pagenav current
$(function(){
 var id = $(".mod_pagenav").attr("id");
 var current = $(".mod_pagenav ul li."+id);

 //var prev =$();
 $(current).addClass("active");

  if($(current.next("li")).size()){
   var nextlist = current.next("li");
   var nextlink = nextlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav li.linearNum").before('次のページへ>>');
  }

  if($(current.prev("li")).size()){
   var prevlist = current.prev("li");
   var prevlink = prevlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav").prepend('<<前のページへ');  
  }

 });

});

HTMl

var pagenav =''+
''+
''+
'1'+
'2'+
'3'+
'4'+
'5'+
'6'+
'7'+
''+
''
'';
document.write(pagenav);

▼HTMLソース

CSS

/* mod_pagenav */
.mod_pagenav{
 margin:0 auto;
 width:960px;
 margin:20px 0 20px 0!important;
}
.mod_pagenav ul{
 position:relative;
 text-align:center;
}

.mod_pagenav ul li.linearNum ul li{
	display:inline-block;
	border:1px solid #e5e5e5;
	margin:0 5px 0 5px;
}
.mod_pagenav ul li.linearNum ul li.active,
.mod_pagenav ul li.linearNum ul li a:focus{
	background-color:#f2f2f2;
	font-weight:bold;
}
.mod_pagenav ul li a{
	text-align:center;
	display:block;
  width:25px;
  padding:2px 0 3px 0;
  text-decoration:none!important;
}

.mod_pagenav ul li.linearPrev a,
.mod_pagenav ul li.linearNext a{
 width:auto;
}
.mod_pagenav ul li.linearPrev{
 position:absolute;
 top:0;
 left:0px;
 z-index:9999;
}
.mod_pagenav ul li.linearNext{
 position:absolute;
 top:0;
 right:0px;
 z-index:9999;
}

投稿 jQueryで簡単にページ送りを自動で表示します。は CodingMania に最初に表示されました。

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。

yotigory — Tue, 22 Jan 2013 05:54:48 +0000

JSを読み込みます

[tool.js]JavaScript

$(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;
					}
	});
});

});

HTMl


MENU


ホーム
ニュース
会社概要
環境活動
採用情報
お問い合わせ

メニューを閉じる

CSS


/* 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 に最初に表示されました。

マウスオーバーすると補足メニューを表示します。

yotigory — Thu, 10 Jan 2013 06:27:32 +0000

JSを読み込みます

[tool.js]JavaScript

// summenu　表示
$(function(){
	var li = $('.mod_categorynav > ul > li');
	 $(li).each(function() {
			var target = $(this);
				target.hover(function(){
				//マウスが乗ったら
				$(target).find('.mod_submenu').slideDown(200);
				},function(){
				//マウスが外れたら
				$('.mod_submenu').hide();
		});  
	});
});

HTMl




  
  
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー
  
  


  
  
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー
  
  


  
  
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー
  
  


  
  
  カテゴリサブメニュー
  
  



  
  
  カテゴリサブメニュー
  カテゴリサブメニュー
  カテゴリサブメニュー

CSS

@charset "UTF-8";

/* mod_categorynav
-----------------------------------------*/
.mod_categorynav{
 width:960px;
}
.mod_categorynav ul{
}
.mod_categorynav ul li{
 position:relative;
 float:left;
 padding:0 10px 0 0;
}
.mod_categorynav ul li.last{
 padding-right:0;
}

/* mod_submenu */
.mod_submenu{
 position:absolute;
 top:90px;
 left:0px;
 z-index:9999;
 padding:20px 0 0 0;
	background:transparent url('img/bg_submenu-top.png') no-repeat left top;
}
.mod_submenu.sublast{
 left:-98px;
	background:transparent url('img/bg_submenu-top02.png') no-repeat left top;
}
.mod_submenu{
 display:none;
}
.mod_submenu ul{
	background:transparent url('img/bk_submenu.jpg') no-repeat left bottom;
 width:240px;
 padding:0 5px 5px 5px;
  zoom: 1;  
}

.mod_submenu ul li{
 float:none;
 font-weight:bold;
 border-bottom:solid 1px #CCCCCC;
 padding:5px 0 0 0;
 margin:0 0 3px 0;
}
.mod_submenu ul li:last-child{
 border-bottom:none;
}
.mod_submenu ul li a{
 display:block;
 float:none;
 font-weight:bold;
}

投稿マウスオーバーすると補足メニューを表示します。は CodingMania に最初に表示されました。

ロールオーバー時、現在地表示時、画像を切り替えします。

yotigory — Tue, 04 Sep 2012 06:22:58 +0000

JSを読み込みます

[gnavimg.js]JavaScript


$(function(){

 $(".mod_Gnavi006 li:not(.current) a").each(function(){
  var a = $(this);
  var img = a.find("img");
  var src_off = img.attr("src");
  var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/,"$1_on$2");

  $("").attr("src",src_on);

  a.bind("mouseenter focus", function(){
		img.attr("src", src_on);
		});

  a.bind("mouseleave blur", function(){
		img.attr("src", src_off);
		});
	});
});

 //current表示
$(function() {
  if ($('.mod_Gnavi006 li').hasClass('current')) {
 $(".mod_Gnavi006 li.current a img").attr("src",$(".mod_Gnavi006 li.current a img").attr("src").replace(/^(.+)_off(\.[^\.]+)$/,"$1_current$2"));
  }
});

HTMl

CSS

.mod_Gnavi006 ul{
	width:616px;
	overflow:hidden;
	position:relative;
}
.mod_Gnavi006 ul li{
	height:45px;
	float:left;
}
.mod_Gnavi006 ul li img{
	display:block; /* IE6隙間防止 */
}
.mod_Gnavi006 ul li a{
	display:block;
}

投稿ロールオーバー時、現在地表示時、画像を切り替えします。は CodingMania に最初に表示されました。

画像置換でグローバルナビゲーションを作ります。

yotigory — Mon, 11 Jun 2012 15:16:30 +0000

HTMl



メニュー01
メニュー02
メニュー03
メニュー04
メニュー05

CSS

/* mod_globalnav 画像置換
-----------------------------------------*/
.mod_globalnav{
  height:45px;
}
.mod_globalnav ul{
  margin:0 auto;
  width:750px;
  height:45px;
  overflow:hidden;
  position:relative;
}
.mod_globalnav ul li{
  float:left;
  width:150px;
  height:45px;
  overflow:hidden;  
}
.mod_globalnav ul li a{
  display:block;
  height:45px;
  text-indent: -9999px;
  background-image: url('bg_globalnav.jpg');  
  background-repeat:no-repeat;

}
.mod_globalnav ul li a.nav01{background-position:0px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav01,
.mod_globalnav ul li a.nav01:hover{background-position:0px -45px;}

.mod_globalnav ul li a.nav02{background-position:-150px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav02,
.mod_globalnav ul li a.nav02:hover{background-position:-150px -45px;}

.mod_globalnav ul li a.nav03{background-position:-300px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav03,
.mod_globalnav ul li a.nav03:hover{background-position:-300px -45px;}

.mod_globalnav ul li a.nav04{background-position:-450px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav04,
.mod_globalnav ul li a.nav04:hover{background-position:-450px -45px;}

.mod_globalnav ul li a.nav05{background-position:-600px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav05,
.mod_globalnav ul li a.nav05:hover{background-position:-600px -45px;}

投稿画像置換でグローバルナビゲーションを作ります。は CodingMania に最初に表示されました。

jqueryで現在地（カレント）にclassを指定します。

yotigory — Mon, 30 Apr 2012 07:07:12 +0000

JSを読み込みます

[current.js]JavaScript

// Globalnav current
$(function(){
var id = $("body").attr("id");
$(".mod_Gnavi ul li a."+id).addClass("current");
});

HTMl

CSS

/* GlobalNavi
-----------------------------------------*/
.mod_Gnavi ul{
	width:597px;
	overflow:hidden;
	position:relative;
}
.mod_Gnavi ul li{
	height:45px;
	float:left;
	overflow:hidden;
}
.mod_Gnavi ul li a.current img{
	margin-top:-45px;
	display:block; /* IE6隙間防止 */
}
.mod_Gnavi ul li a{
	display:block;
}
.mod_Gnavi ul li a:link    {}
.mod_Gnavi ul li a:visited {}
.mod_Gnavi ul li a:hover   {margin-top:-45px;}
.mod_Gnavi ul li a:active  {margin-top:-45px;}

投稿 jqueryで現在地（カレント）にclassを指定します。は CodingMania に最初に表示されました。

ナビゲーション アーカイブ - CodingMania

ドロップダウンメニュー[レスポンシブ対応]

JSを読み込みます

JavaScript[main.js]

HTMl

CSS

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02

JSを読み込みます

[main.js]JavaScript

HTMl

CSS

現在地表示をするドロップダウン式サイドナビ

JSを読み込みます

[main.js]JavaScript

HTMl

CSS

クリックで表示する吹き出し型ドロップダウンメニュー

JSを読み込みます

[dropdown.js]JavaScript

HTMl

CSS

jQueryで簡単にページ送りを自動で表示します。

JSを読み込みます

[pagenav.js]JavaScript

HTMl

▼HTMLソース

CSS

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。

JSを読み込みます

[tool.js]JavaScript

HTMl

CSS

マウスオーバーすると補足メニューを表示します。

JSを読み込みます

[tool.js]JavaScript

HTMl

CSS

ロールオーバー時、現在地表示時、画像を切り替えします。

JSを読み込みます

[gnavimg.js]JavaScript

HTMl

CSS

画像置換でグローバルナビゲーションを作ります。

HTMl

CSS

jqueryで現在地（カレント）にclassを指定します。

JSを読み込みます

[current.js]JavaScript

HTMl

CSS

ナビゲーションアーカイブ - CodingMania