ツリーメニューの画像表示について
ツリーメニューの画像の表示場所について困っております。
＋画像をクリックすると階層が開き－の画像をクリックすると
階層が閉じる仕様です。
動作は正常なのですが画像がリンクの上に表示されてしまい
文字の横に表示させることができません。
具体的には以下のようなレイアウトです。
＋
大メニュー
これを
＋ 大メニュー
のようなレイアウトにしたいのですがどのようにすればいいもの
でしょか？
cssでwidthを設定してしまうとこのような現象になってしまいますが
レイアウト上widthの指定ははずせないもので・・・
ソースは以下のようになっております。
---menu.js---
function setCookie(key,val){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
tmp1 = tmp.indexOf(key,0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
start = tmp.indexOf("=",0);
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start+1,end)));
}
return("");
};
function delCookie(key){
expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};
no=0;
window.onload=function(){
var ie=(navigator.appName.indexOf("Microsoft") >= 0);
var g_nav=document.getElementById('g_nav');
g_nav.setChild=setChild;
g_nav.setChild();
var ulgroup=g_nav.getElementsByTagName('UL');
for(var i=0;i<ulgroup.length;i++){
if(ie) ulgroup[i].style.height=0;
ulgroup[i].setChild=setChild;
ulgroup[i].setChild();
}
}
function changeImg(){
var cnode=this.childNodes;
for(var i=0;i<cnode.length;i++){
if(cnode[i].nodeName=="IMG"){
cnode[i].src=(this.dispChild==false)?"hide.gif":"show.gif";
}
}
}
function setChild(){
var cnode=this.childNodes;
var preobj=new Object;
var obj=new Object;
for(var i=0;i<cnode.length;i++){
if(cnode[i].nodeName=="LI"){
if(cnode[i].getElementsByTagName('ul').length>0){
var dispFlg= getCookie("ul") & Math.pow(2,no);
preobj.no=no++;
preobj.dispChild=dispFlg;
preobj.child=cnode[i];
preobj.changeImg=changeImg;
preobj.innerHTML="<div style='position: fixed; top: 16px; left: 5px;'><img src='hide.gif'></div>"+preobj.innerHTML
if(preobj.dispChild==false) preobj.child.style.display="none";
else preobj.changeImg();
preobj.onclick=function(){
this.dispChild=(this.dispChild==false)?true:false;
if(this.dispChild==false) this.child.style.display="none";
else this.child.style.display="";
this.changeImg();
var ul=getCookie("ul") ^ Math.pow(2,this.no);
setCookie("ul",ul);
}
}
preobj=cnode[i];
}
}
}
---menu.css---
#g_nav {
width: 160px;
margin: 0;
padding: 0;
background: #396;
}
#g_nav ul.sub_b {
width: 160px;
margin: 0;
padding: 0;
background: #fff;
}
#g_nav li.sub {
width: 160px;
list-style: none;
margin: 0;
border-bottom: solid 1px #999;
}
#g_nav li.sub a {
font-size: 12px;
color: #333;
font-weight: bold;
padding: 4px 0;
text-decoration: none;
background: #fff;
}
#g_nav li sub a:hover {
background: #3c6;
}
---menu.html---
<div id="g_nav">
<ul>
<li class="sub_t"><a href="">大メニュー</a></li>
<li>
<ul class="sub_b">
<li class="sub"><a href="">小メニュー1</a></li>
<li class="sub"><a href="">小メニュー2</a></li>
</ul>
</li>
</ul>
</div>
わかりづらい質問になってしまいましたが足りない情報につきましては
補足させて頂きます。
どうぞ宜しくお願い致します。
お礼
himajin100000さん、早速レスありがとうございます。 そうですか。 もう一つ要素を作成する方法で考えます。 どうもありがとうございました。