ほとんど同じで、読み込みが必要なページを12個作成したくないため、その時にクリックされたメニューに基づいてテキストを変更するメニューシステムを作成しようとしていますの読み込み。 私はオンラインで見たことがありますが、私は正しいキーワードを使用していない可能性が高いため、何も見つかりませんでしたが、これを達成するにはどうすればよいでしょうか?私はあなたがテキストを非表示にするCSSでの視認性タグを使用することができることを発見したが、これは空白行をたくさん残して、私は大量のテキストを表示していますので、それはひどい見えるメニューのクリックでテキストを変更する
HTML:
<html>
<head>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<div id="accordian">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Menu 1</h3>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li>
<h3><span class="icon-tasks"></span>Menu 2</h3>
<ul>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Menu 3</h3>
<ul>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Nunito);
* {margin: 0; padding: 0;}
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background: #003040;
background: linear-gradient(#003040, #002535);
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.15s;
}
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
jQueryの:
$(document).ready(function(){
$("#accordian h3").click(function(){
if(!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
})
})
サイドノート:CSSを使用してページ上に要素を表示しない場合は、 'visibility:hidden'の代わりに' display:none'を使用できます。可視性は、要素が占めるスペースを使用しますが、コンテンツは表示しませんが、表示はスペースも表示コンテンツも使用しません。 – TW80000
これはあなたがJavascriptのJSONソリューションを必要としているように聞こえます... CSSではありません。 –
質問が不明です – brk