ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

使えるドロワーメニューmmenu コピペ用ソース

メニューの数か多くなった時にスマホでしっかりスクロールできるドロワーメニュー。

デモはこちらmmenu

HTML

htmlの基本構造はbody の直下に#menu と#pageが並列

メニューアイコンを右上に置きたい場合はmh-btns-rightにする。右からメニュを出現させたい場合はjsで調整。

<nav id="menu">
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/">Our work</a></li>
    <li><a href="#/">About us</a></li>
    <li><a href="#/">Services</a></li>
    <li><a href="#/">Contact</a></li>
  </ul>
</nav>
<div id="page">
  <div class="mh-head Sticky">
    <span class="mh-btns-left">
      <a href="#menu" class="fa fa-bars"></a>
      <a href="#page" class="fa fa-times"></a>
    </span>
    <span class="mh-text">上部バー</span>
  </div>

  <div class="content">
    ここにメインコンテンツ
  </div>
</div>

CSS

外部CSS

読み込むCSSは全部で4つ

一番上はメニューアイコン用のfontawesome。これは直リンクでOK。それ以外はダウンロードして必要に応じてCSSを編集しサーバーにアップするのが良い。SSL化されたサイトで使う場合はダウンロード必須。demo.cssに記述されているリセット系cssはごっそり削除したほうが使いやすい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="http://mmenu.frebsite.nl/demo/css/demo.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.css?v=7.0.1" />

javascript

外部javascript

こちらもjquery 以外はSSL(https)対応のサイトで使う場合は直リン不可。

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/demo/js/playground.js"></script>

内部javascript

仕様の調整はmmenu メニュー > Documentation > Add-onsやExtensions を参照。

メニューを右から出したい場合はextensions の[カッコ]のなかに"position-right"を追加。

<script>
$(function() {
	$("#menu").mmenu({
		extensions 	: [ "theme-white", "listview-justify", "border-full", "shadow-page" ],
		navbar 		: false
	});
	$(".mh-head.mm-sticky").mhead({
		scroll: {
			hide: 200
		}
	});
	$(".mh-head:not(.mm-sticky)").mhead({
		scroll: false
	});
});
</script>
スポンサーサイト

jQuery でトグル

関連記事:CSSでトグル

CLICK HERE TO TOGGLE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<div class="jqtgtriger">クリック領域</div>
<div class="jqtgcont">コンテンツ</div>

javascript

<script type="text/javascript">
$(function(){
	$("div.jqtgcont").hide();
	$(".jqtgtriger").click(function(){
		$(this).toggleClass('on');
		$(this).next(".jqtgtriger").slideToggle(90);// 数字で速さ調整
		return false;
	});
});
</script>

jQuery でコンテンツをタブ切り替え

コンテンツ切り替えjQuery コピペ用ソース。CSSはお好みで。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.

HTML

ナビ

<ul class="tab">
	<li class="active"><a href="#tab1">CAT</a></li>
	<li class=""><a href="#tab2">TAG</a></li>
</ul>

コンテンツ

<div id="tab1" class="tab_content">
	//コンテンツA
</div>
<div id="tab2" class="tab_content">
	//コンテンツB
</div>

javascript

$(document).ready(function() {
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	//On Click Event
	$("ul li").click(function() {
		$("ul li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
});

ドロワーメニューjQuery Drawerコピペ用ソース

追記:このDrawerはメニューの数が多くなってスマホ端末の高さを超えるとスクロールできない問題があり。動きが悪すぎて使えない。使えるドロワーメニューはこちら

HTML

head内

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

body

<body class="drawer drawer--left">

body以下

<button type="button" class="drawer-toggle drawer-hamburger">
	<span class="sr-only">toggle navigation</span>
	<span class="drawer-hamburger-icon"></span>
</button>
<div class="navbar"></div>

ナビ

<nav class="drawer-nav" role="navigation">
	<ul>
		<li><a href="/">TOP</a></li>
		<li><a href="#">CATEGORY</a></li>
		<li><a href="#">TAG</a></li>
		<li><a href="#">SINGLE</a></li>
		<li><a href="#">PAGE</a></li>
	</ul>
</nav>

javascript

<script>
$(document).ready(function() {
	 $('.drawer').drawer();
});
</script>

CSS

ナビバー

.navbar {
    height: 55px;
    width: 100%;
    z-index: 2;
    background: #f00;
    position: fixed;
    top: 0;
}

1、3行目はXマークの色。2行目はナビバーの色に合わせる

.drawer-hamburger-icon, .drawer-hamburger-icon::after, .drawer-hamburger-icon::before{background: #fff !important;}
.drawer-open .drawer-hamburger-icon{background-color: #f00 !important;}
.drawer-close .drawer-hamburger-icon{background-color: #fff;}

参考ソース:drawer

jQuery でタブ切り替えコンテンツ

スマホサイトでもよく使うjQueryです。CSSはおこのみでどうぞ。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Loremのイプサムの嘆きがAMET座る、consectetur adipiscing ELIT、eiusmod労働と肥満ように、temporと活力んsedの。長年にわたり、私はそれから、学区nostrudのaliquipの利点を行使してはならない人、来るが、動作させるためになります。 Duisは1 irureがcillumのdolore EUは何の結果を生成しない逃げるように欲望の痛みの喜びで批判されています。 Excepteur cupidatatブラックは、うまくいけば、あなたは罪のQUIのofficiaで、つまり、私の労苦、suntを女々しいとその精神を放棄されていません

html

<ul class="tabs">
	<li class="active"><a href="#tab1">ラテン語</a></li>
	<li class=""><a href="#tab2">日本語</a></li>
</ul>
<div id="tab1" class="content">
コンテンツA
</div>
<div id="tab2" class="content">
コンテンツB
</div>

javascript

<script type="text/javascript"> 
$(document).ready(function() {
	$(".content").hide(); 
	$("ul.tabs li:first").addClass("active").show(); 
	$(".content:first").show(); 
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); 
		$(this).addClass("active");
		$(".content").hide();
		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn();
		return false;
	});
});
</script>

jQuery トグル開閉

開閉ボタン

Lorem ipsum dolor sit amet, saepe impetus malorum eum in, mei cu tale reprimique. Est equidem vituperata ei. Vel alienum urbanitas ad. At omnis velit sed.

Ex prima brute veritus cum, nec no periculis referrentur. Ei legendos honestatis dissentiet his, eligendi dissentiunt ut pro. Molestiae intellegat ei eam, ferri ceteros sit ei, mea ne ferri signiferumque. In nominavi mandamus has, eu assentior efficiantur vel. Ut paulo consetetur nam, nec ex errem disputationi.

Quis graece aperiam in quo. Duo odio dolorem ei, molestiae definiebas ea sea, usu vidit tempor cu. No vim officiis accusata moderatius, enim zril qui te, ea sed congue vulputate. Quo ex eros feugait. Timeam delicata quaerendum et nam, quo ad illum expetenda imperdiet. Quot senserit cotidieque usu et, ne pri graeci impetus facilisi, ea nam corpora omittantur.

Vix putent vituperatoribus et, at semper feugait sapientem quo, ea mei ridens vocent appetere. Veri dictas inciderint his ad. Stet deleniti eu sed, te his homero deseruisse. Verear feugiat officiis pro ad, eos ei quot quidam, verear appetere vel cu. No quo sapientem ocurreret reprehendunt.

Vel cu legere deserunt, idque aeque epicurei mea id, stet veritus definitionem te sit. Ut essent mediocrem ius. Eos et placerat liberavisse, ponderum intellegam eos ut. Invidunt quaestio adipiscing sit ex, est case eruditi fabulas at. Vero graeco cu sed.

javascript

スピードは5行目数字で調節

<script type="text/javascript">
$(function(){
	$("div.triger").click(function(){
		$(this).toggleClass('on');// ←class="on"を追加/削除
		$(this).next("div.togglecontent").slideToggle(90);// トグル表示/非表示
	});
});
</script>

HTML

<div class="triger">開閉ボタン</div>
<div class="togglecontent">開閉の中身</div>

CSS

ページロード時に非表示するためのCSS。javascript でもできるがjsの読み込みが遅いとロード時に一瞬表示されてしまうのでCSSで処理する。

.togglecontent{
	display: none;
}

jQuery: ページの読み込み時にフェードイン

今では便利なjQueryです。たったこれだけでフェードイン! 速度を数字で調節する際はカッコのなかの""は不要。jquery.jsを加えるのも忘れずに。
<script type="text/javascript">
	$(document).ready(function() {
		$('#wrapper').fadeIn("slow");
	});
</script>
html
<div id="wrapper">
	ここにコンテンツ
</div>
css
#wrapper{
	display: none;
}
追記【2012/7/19】:Flash部分には反映されないようです。

jQuery で target="_blank" を使わず別ウィンドウ

厳密な xhtml ではtarget="_blank"はなしとされています。
最近のウェブブラウザではタブでウィンドウを開くことができるので別ウィンドウで開く意味はますますなくなります。

どうしても別ウィンドウでリンクさせたい場合は以下のJavaScriptを使います。
$(document).ready(function(){
  $("._bank").click(function(){
    window.open(this.href,'_blank');
      return false;
    });
});


newwindow.jsと名前をつけてjsフォルダにアップしたら、以下の2行を<head>のなかにコピペ
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/newwindow.js"></script>


htmlの書き方
<a href="http://jquery.com/" class="_blank">jQuery</a>

target の代わりに class で別ウィンドウリンクさせることができます。
最新バージョンのjQueryはhttp://jquery.com/

カテゴリー

広告

最近の記事

便利ツール

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。