下記サイトのメニューをフラッシュを使わずに
jqueryなどで、できますでしょうか?
お願いします。
http://www.qualt-graph.com/
No.2
- 回答日時:
とりあえずの参考まで。
(文字数制限があるのでかなり省略&つめてます)
画像はボーダーで代用。バーの移動速度の変化は省略。
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>
No.1ベストアンサー
- 回答日時:
queryなどで、できますでしょうか?
=>提示サイトを見ました。jQueryでも出来ます。
jQueryを使うなら「jQuery UI 」というのを使ってはどうでしょうか
ひとおとりの、WidgetsとかEffectsとかが、できあいで揃っています。
参考URL:http://jqueryui.com/home
この回答へのお礼
お礼日時:2010/06/24 16:34
あれから、いろいろ調べてみまして
MagicLineというのを発見し次に進むことが出来ました。
みなさんありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- デジタルカメラ 「フラッシュ補正+露出補正」連動とは? 2 2022/03/23 00:06
- 写真 ペットの撮影 2 2022/11/20 22:23
- 写真 さっき猫の写真をiPhoneのカメラで撮ろうとしたら、フラッシュが自動になっていてそのフラッシュが作 1 2022/07/18 20:34
- デジタルカメラ iPhone並みに綺麗に映るコンデジを探しています。 iPhone7を使用しています。カメラ性能が綺 6 2022/05/21 15:44
- その他(音楽・ダンス・舞台芸能) この動画のBGMがダウンロードできるサイトと曲名を知りたいです 2 2023/06/07 06:44
- その他(プログラミング・Web制作) 恒久的リダイレクトについて 2 2023/07/13 15:58
- CAD・DTP 逐次比較ADCとフラッシュADC 1 2022/07/03 15:46
- スタンプ・絵文字・顔文字 特殊文字について教えてください 4 2022/09/13 12:28
- JavaScript jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている 3 2023/07/03 18:29
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
入力フォームの値をQRコードで...
-
バッチファイル 特定ウインドウ...
-
正規表現で、特定の文字列を含...
-
PDFを(htmlのように)無限に縦...
-
ワードでA3横の画面にして、文...
-
1w=1j.s
-
転記したデータを上書きする
-
製本に使われるパラフィン紙は...
-
二つのbxsliderをレスポンシブ...
-
PHPでヘッダー情報の中のReques...
-
VBA ディレクトリ名をワイルド...
-
RPA(PowerAutomate)の実装について
-
c言語でペイントミノ
-
ダブルクリックと2回クリックの...
-
スライドを最後の画像で止めたい
-
bxsliderで最初に縦に複数表示...
-
JQuery、セレクトボックスをル...
-
サーバーとルーターでどこまで...
-
Intelのスティックpcを使ってエ...
-
以下のURL入れますか?皆さんは↓
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
readyStateが4にならない原因
-
変数の内容を別functionに渡したい
-
【再質問】計算(入数*単価)...
-
tableのtr要素をドラッグ&ドロ...
-
Ajaxの結果のページングの方法
-
Ajaxでの、任意の件数でページ...
-
CSVファイルの文字列の表示につ...
-
スライドを最後の画像で止めたい
-
Ajax.Requestで取得したHTMLソ...
-
下記サイトのメニューをフラッ...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
おすすめ情報