自動隠しメニュー

ANOTHER EDIT：自動隠しメニュー

これは、完全なコードであるフィドル（http://jsfiddle.net/pbb9cc9f/7/）としてメニューが働いているが、私は私のHTMLファイルにそれを実装することはできません。私は何を間違えたのですか？プリロードされたJavaScriptのリンクが間違っていますか？サイクルのスライドショーがメニューに邪魔されていませんか？ありがとうございました！

<!DOCTYPE html> 
<html> 

<title>CHRIS RHODES</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 

<script type="text/javascript"> 
$('#slide').cycle({ 
    fx:  'none', 
    timeout: 0, 
    next: '#nex', 
    prev: '#pre' 
}); 

$(document.documentElement).keyup(function (e) { 
    if (e.keyCode == 39) 
    {   
     $('#slide').cycle('next'); 
    } 

    if (e.keyCode == 37) 
    { 
     $('#slide').cycle('prev'); 
    } 

}); 
</script> 

<script type="text/javascript"> 
(function() { 

    var time = 3000, 
    timer; 

    clearTimeout(timer); 
    $('.target').stop(true).css('opacity', 1).show().fadeOut(8000); 

    function handlerIn() { 
    clearTimeout(timer); 
    $('.target').stop(true).css('opacity', 1).show(); 
    } 

    function handlerOut() { 
    timer = setTimeout(function() { 
     $('.target').fadeOut(8000); 
    }, time); 
    } 

    $(".link, .target").hover(handlerIn, handlerOut); 

}()); 
</script> 

<head> 

<style type="text/css"> 

body { 
    font-family: Arial; 
    text-decoration: none; 
    color: black; 
    font-size: 8pt; 
    letter-spacing: 0.1em; 
} 

a { 
    font-family: Arial; 
    text-decoration: none; 
    color: black; 
    font-size: 8pt; 
    letter-spacing: 0.1em; 
} 

.target { 
    display: none; 
    left: 20px; 
    top: 20px; 
    width: 98px; 
    height: 60px; 
    position: absolute; 
    z-index: 99999; 
    background: red; 
} 

.link { 
    left: 0px; 
    top: 0px; 
    width: 138px; 
    height: 100px; 
    position: absolute; 
    z-index: 9999; 
    background: blue; 
} 

#slide { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#pre { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    background-color: transparent; 
    cursor: w-resize; 
    z-index: 999; 
} 

#nex { 
    position: fixed; 
    right: 0px; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    background-color: transparent; 
    cursor: e-resize; 
    z-index: 999; 
} 

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.Absolute-Center.is-Resizable { 
    max-width: 80%; 
    max-height: 90%; 
    resize: both; 
    overflow: auto; 
} 

</style> 

</head> 

<div class="link"></div> 

<div class="target"> 
CHRIS RHODES<br><br> 
<a href="http://www.chrisjrhodes.co.uk">Comissions</a><br> 
<a href="http://www.chrisjrhodes.co.uk/editorial">Editorial</a><br> 
<a href="http://www.chrisjrhodes.co.uk/contact">Contact</a><br> 
</div> 

<div id="pre"></div> 
<div id="nex"></div> 

<ul id="slide"> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/01-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/02-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/03-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/04-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/05-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/06-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/07-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/08-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/09-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/10-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/11-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/12-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/13-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/14-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/15-800x800.jpg" class="Absolute-Center is-Resizable"/> 
</ul> 

</body> 
</html>

出典

2016-09-04 Phil K

これはできません。あなたの権利、あなたはそこにない要素を浮かべることはできません。あなたはいつもページにある何らかの要素を除いています。また、ユーザーはどのような視覚的なヒントなしでどの位置に移動するかを知っていますか？ – Liam

メニューはページを見て、次に目に見えないように見えるようになっています。彼らはそれを使用したいときに人々はそれに乗って戻ることができます。 –

だからあなたは透明にしたいですか？消滅しないで "見る"ようになりますか？あなたが今追加したコードがあれば**正確に**は質問ですか？ – Liam

この場合、ホバーソースとして別の目に見える要素が必要です。これは他にも目に見えるものや、UI上に残しているピクセル幅の幅がわずかなもの、またはこれのために作成できる特別な要素/アイコンです。デスクトップやモバイルでも動作するはずです。

出典

2016-09-04 17:22:32

他の要素がやっているとは思いません。メニューを目に見えないようにコードからやり直す必要があります。それは非常にシンプルな、単純なHTMLの3つのリンクです。私がそれらの上にマウスを置くと、それらが滞在し、ちょうど戻ってくる限り、透明になっても構いません。 –

はvisibility

<script type="text/javascript"> 
    setTimeout(function() { 
    $('.menu').css("visibility", "hidden"); 
    }, 5000); 
</script>

visibility: hiddenを変更するだけで、あなたのビジョンから要素を隠してみてください。しかしそれはそこにあります。そうではないdisplay: none;

出典

2016-09-04 17:23:10

ありがとうございますが、これはうまくいかないようですが、私が知る限り、それはまだ消えてしまいます。 –

実用的なフィドルを提供できますか？ –

ウェブサイトのコード全体を私の質問に入れました。 –

-1

これはあなたが訴えていることを実行するjsコードです。あなたがcssとhtmlの部分を望むかどうか知らせてください。あなたはそれを使って遊んで自分のスタイルを作ることができます。

function expand(s){ 
    var td = s; 
    var d = td.getElementsByTagName("div").item(0); 
    td.classname = "menuHover"; 
    d.className = "menuHover"; 
} 

function collapse(s){ 
    var td = s; 
    var d = td.getElementsByTagName("div").item(0); 
    td.className = "menuNormal"; 
    d.className = "menuNormal"; 
}

出典

2016-09-04 17:28:49

これは、メニューが見えない場合にイベントを発生させる方法の問題を解決しません。私はそれがここで本当の問題だと思う。 –

答えて

関連する問題