−するするパネル表示−

indexに戻る 基本の体裁 ページの基礎 backgraundimg、 ソーシャルアイコン タップして電話

フォーム するするパネル表示 グローバルナビ新 グローバルナビ古

フォントの指定

divをするっと出す

必要な設定は
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13138542858

【HTML】
<a onclick="flipPanel()">メニュー</a>


【CSS】
基本
div#panel{
	position: absolute; left: 100px;
	width: 400px;
	height: 300px;
	border: solid 1px #f69;
	transition: top 1s linear 0s;
}
div#panel.hidden{
	top: -320px;
}
div#panel.appear{
	top: 100px;
}


/*--------------------------------------------------------

メニューリンク・パネルを出す

--------------------------------------------------------*/
div#panel{
	position: absolute; left: 100px;
	width: 400px;
	height: 300px;
	border: solid 1px #f69;
	transition: top 1s linear 0s;
}
div#panel.hidden{
	top: -320px;
}
div#panel.appear{
	top: 100px;
}



【JavaScript】
//メニューリンク・パネルを出す
function flipPanel(){
	var panel = document.getElementById('panel');
	panel.className =
	( panel.className=='hidden' ) ? 'appear' : 'hidden';
}