ツリーメニューの画像表示について

質問

ツリーメニューの画像の表示場所について困っております。
＋画像をクリックすると階層が開き－の画像をクリックすると
階層が閉じる仕様です。

動作は正常なのですが画像がリンクの上に表示されてしまい
文字の横に表示させることができません。
具体的には以下のようなレイアウトです。

＋
　　大メニュー

これを

＋ 大メニュー

のようなレイアウトにしたいのですがどのようにすればいいもの
でしょか？
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>

わかりづらい質問になってしまいましたが足りない情報につきましては
補足させて頂きます。
どうぞ宜しくお願い致します。

回答No.1

auty · ベストアンサー

＞＞＞　文字の横に表示させることができません。

この部分についてのことですが、

<div style='position: fixed; top: 16px; left: 5px;'><img src='hide.gif'></div>
はブロック要素なので改行されます。

preobj.innerHTML = "<div style='position: fixed; top: 16px; left: 5px;'><img src='hide.gif'>" + preobj.innerHTML + "</div>";
または
preobj.innerHTML = "<span style='position: fixed; top: 16px; left: 5px;'><img src='hide.gif'>" + preobj.innerHTML + "</span>";
として見てはどうでしょうか。

お礼

何度もすみません。
引き続き試してみたところ無事に思うような形にすることができました！

しかし後から気づいたのですが問題が発生です・・・
階層を閉じている状態で＋の画像で開いている状態だと－の画像に
切り替わるものだったのですが閉じても開いても＋の画像のまま
表示されてしまいます。

preobj.innerHTML = "<div class='jsimg' onmouseover='onColor(this)' onmouseout='outColor(this)'><img src='hide.gif'>" + preobj.innerHTML + "</div>";

とやるとこのような現象になり
preobj.innerHTML = "<img src='hide.gif'>" + preobj.innerHTML
とやると正常に画像が切り替えされます。

補足

早速のお返事ありがとうございます。微妙にカテ違いだったかなと
心配しておりました。

早速ですがjsファイルを変更してみたのですが変わりませんでした。
質問後も試行錯誤しておりcssの問題なのかと思い変更してみましたが
現状変わらずです・・・

---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 {
list-style: none;
margin: 0;
border-bottom: solid 1px #999;
}

.sub_t {
padding: 0 0 0 10px;
border-bottom: solid 1px #fff;
}

#g_nav li.sub_t a {
display: block;//ここを外すと横並びにはなるのですがdisplayblockを指定したいです。
height: 25px;
font-size: 12px;
color: #fff;
font-weight: bold;
padding: 6px 0 5px 10px;
text-decoration: none;
background: #396;
}

#g_nav li.sub a {
display: block;
height: 25px;
font-size: 12px;
color: #555;
font-weight: bold;
padding: 6px 0 5px 10px;
text-decoration: none;
background: #fff;
}

#g_nav li.sub_t a:hover, #g_nav li sub a:hover {
background: #3c6;
}

---html---
<div id="g_nav">
<ul>
<li class="sub_t"><a href="">大メニュー1</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>