私はで目に見えるメニューのセットを持っています
http://carbonyzed.co.uk/menu/2/
これで、 MENUボタンをクリックすると、UL要素が開きますが、全幅バージョンに変更するには、menu.pngアイテム（ボタン）も必要です。menu_open.pngと呼びます。
これがHTMLコードです
<div class="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a>
<ul id="menulink">
<li>
<a href="#">Campaigns </a>
<ul class="submenu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
</ul>
</li>
<li>
<a href="#">Links </a>
<ul class="submenu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
</ul>
</li>
<li>
<a href="#">Media </a>
<ul class="submenu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
</ul>
</li>
<li><a href="#">History</a></li>
<li>
<a href="#">Messages </a>
<ul class="submenu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
</ul>
</li>
<li>
<a href="#">Maintenance </a>
<ul class="submenu">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
</ul>
</li>
</ul>
</div>
そしてここに信頼できるCSSセクションがあります（またはそう私は信じています）
.logo {
display: block;
text-indent: -9999px;
text-transform: capitalize;
background: url(../images/menu.png) no-repeat;
height: 120px;
}
#menulink {
display: none;
}
.sidebar {
height: 100%;
min-height: 100%;
width: 213px;
/**CODE - background: url(../images/sidebarBg.png); - here**/
float: left;
position: absolute;
top: 0;
}
/** MENU **/
ul {
margin: 0;
padding: 0;
display: none;
list-style: none;
background: url(../images/sidebarBg.png);
}
ul li {
background: url(../images/listBg.png) bottom no-repeat;
text-indent: 50px;
}
ul li a {
color: white;
display: block;
text-decoration: none;
padding: 21px;
width: 170px;
text-shadow: 1px 1px 0 #191b20;
position:relative;
}
ul li:hover {
background: url(../images/listBgGreen.png) no-repeat;
}
ul li a:hover, ul li:hover a {
color: #FFF;
text-shadow: 1px 1px 0 #547829;
}
ul li a.dashboard {
background: url(../images/iconDashboard.png) 25px 50% no-repeat;
}
ul li a.pages {
background: url(../images/iconPages.png) 25px 50% no-repeat;
}
ul li a.media {
background: url(../images/iconMedia.png) 25px 50% no-repeat;
}
ul li a.history {
background: url(../images/iconHistory.png) 25px 50% no-repeat;
}
ul li a.messages {
background: url(../images/iconMessages.png) 25px 50% no-repeat;
}
ul li a.settings {
background: url(../images/iconSettings.png) 25px 50% no-repeat;
}
/** SUB MENU **/
ul li ul.submenu {
display: block;
z-index: 500;
top: 0;
}
ul li ul.submenu li {
background: url(../images/subMenuBg.png) bottom no-repeat;
}
ul li ul.submenu li a {
background: none;
padding: 13px;
width: 189px;
}
ul li ul.submenu li.last {
border-bottom: 1px solid #54575b;
background: url(../images/subMenuBg.png) top no-repeat;
}
ul li ul.submenu li.last a {
padding: 12px;
}
ul li:hover ul.submenu li a {
text-shadow: 1px 1px 0 black;
}
ul li ul.submenu li:hover {
background: url(../images/subMenuBgHover.png) bottom no-repeat;
}
/** PIPS **/
.pip {
display: block;
background: url(../images/pipBg.png);
padding: 3px 12px;
position: absolute;
top: 20px;
right: 25px;
color: white;
text-align: center;
text-indent: 0;
font-size: 10px;
border-top: 1px solid #1c1f23;
border-bottom: 1px solid #4c4f56;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
ul li:hover .pip {
background: url(../images/pipBgHover.png);
border-top: 1px solid #547829;
border-bottom: 1px solid #a4ce6b;
}
ご不明な点がある場合や、さらに詳しい情報が必要な場合は、お問い合わせください。いつものように、あなたの助けを本当にありがとう。
ヘンリー
JavaScript Eliment
<script language="JavaScript">
function showOrHide(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
</script>
このコードのどこに幅セクションを配置しますか？ありがとう：D