重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

下記サイトのメニューをフラッシュを使わずに

解決済

  • 質問者：w_matsuno
  • 質問日時：
  • 回答数：2件

下記サイトのメニューをフラッシュを使わずに
jqueryなどで、できますでしょうか？
お願いします。

http://www.qualt-graph.com/

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： yyr446
  • 回答日時：

queryなどで、できますでしょうか？


＝＞提示サイトを見ました。jQueryでも出来ます。

jQueryを使うなら「jQuery UI 」というのを使ってはどうでしょうか
ひとおとりの、WidgetsとかEffectsとかが、できあいで揃っています。

参考URL：http://jqueryui.com/home
    • good
    • 0
    • 件
通報する
この回答へのお礼

あれから、いろいろ調べてみまして
MagicLineというのを発見し次に進むことが出来ました。
みなさんありがとうございました。

通報する
お礼日時：2010/06/24 16:34

No.2

  • 回答者： fujillin
  • 回答日時：

とりあえずの参考まで。


（文字数制限があるのでかなり省略＆つめてます）
画像はボーダーで代用。バーの移動速度の変化は省略。
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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん
ありがとうございました。

通報する
お礼日時：2010/06/24 16:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報