- ベストアンサー
下記サイトのメニューをフラッシュを使わずに
下記サイトのメニューをフラッシュを使わずに jqueryなどで、できますでしょうか？ お願いします。 http://www.qualt-graph.com/
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
とりあえずの参考まで。 （文字数制限があるのでかなり省略＆つめてます） 画像はボーダーで代用。バーの移動速度の変化は省略。 jqueryを利用すればもっと簡単にできます。 <html> <style> ul#navi {list-style-type:none;margin:0;padding:0;position:relative;height:100px;overflow:hidden;} ul#navi li {width:100px;font-weight:bold;text-align:center;float:left;} ul#navi li a {text-decoration:none;color:#000;display:block;width:100%;height:2em;} ul#navi li div {width:100%;height:1px; _height:4px;overflow:hidden;border-top:1px solid #666;border-bottom:1px solid #eee;background-color:#bbb;} ul#navi li#marker {position:absolute;top:2em;left:0px;} ul#navi li#marker div {margin-top:-1px;border-top:1px solid #8be;border-bottom:1px solid #24e;background-color:#48e;} </style> <body> <ul id="navi"> <li><a href="">TEXT1</a></li> <li><a href="">Text2</a></li> <li><a href="">TEXT3</a></li> <li><a href="">Text4</a></li> <li><a href="">TEXT5</a></li> <li id="marker"></li> </ul> <script type="text/javascript"><!-- //@cc_on @set @v=(@_jscript_version<=5.8) (function(nid,pos){ var nav=document.getElementById(nid); var e,i=0,elm=nav.getElementsByTagName("li"); var mark,start,cnt=0,d=document.createElement("div"); d.innerHTML=" "; while(e=elm[i++]){ e.appendChild(d.cloneNode(true)),cnt++; if(e.id=="marker"){mark=e; cnt--;} if(cnt==pos)start=e; } if(!mark||!start)return; start=start.offsetLeft; mark.style.left=start+"px"; var mover=(function(op){ var tid,p=op; return function(e){ var t=e./*@if(@v)srcElement@else@*/target/*@end@*/; if(t.nodeName!="A")return; if(tid)clearTimeout(tid); var ep= e.type=="mouseover"?t.parentNode.offsetLeft:op; var d=(ep>p),sp=d?p:ep; ep=d?ep:p,d=(d?1:-1)*8; (function R(){ p+=d,p<sp?p=sp:p>ep?p=ep:tid=setTimeout(R,10); document.getElementById("marker").style.left=p+"px"; })(); } })(start); nav./*@if(@v)attachEvent("on"+ @else@*/addEventListener(/*@end@*/"mouseover",mover,false); nav./*@if(@v)attachEvent("on"+ @else@*/addEventListener(/*@end@*/"mouseout",mover,false); })("navi", 4); //←id of UL, start position(0 start) //--></script>
お礼
fujillinさん ありがとうございました。
お礼
あれから、いろいろ調べてみまして MagicLineというのを発見し次に進むことが出来ました。 みなさんありがとうございました。