ホームページのデザインに関して
質問失礼します。
現在、WEBサイトを製作中です。
検索して、とあるサイトからスライドショーのやり方とメニューが縦にスクロールしても
ついてくる紹介をしていました。
以前のことなので、紹介サイトは覚えておりませんが…
そこで、スライドショーは無事に出来たのですが…
メニューがついてくることに質問があります。
(1)スクロールした際に、メニューがついてくる高さを設定したいです。
現在だと、早い段階でメニューがついてきますので、もう少し下にスクロールしてから
メニューが降りてくると助かります。
(2)この降りてくるメニュー、常に1番上に表示されているようにしたいです。
所々、スクロールすると画像の下に表示されることがあります。
画像や文字の上に表示されるようにしたいです。
(3)なぜか、中央に配置しているロゴ画像は真ん中ですが、メニュー全体が若干左よりです。
メニューも真ん中に表示されると幸いです。
以下jsです。
// JavaScript Document
(function(){
var options = {
duration: 1500,
easing: 'easeOutCubic',
auto: true,
interval: 3000
};
var $window = $(window),
$container = $('#slider'),
$element = $container.find('ul'),
$list = $element.find('li'),
$next = $container.find('#next'),
$prev = $container.find('#prev'),
shift = 2,
lw = $list.width(),
len = $list.length,
timer = '';
var $header = $('#header'),
$headerAfter = $header.next(),
headerY = $header.height(),
containerY = $container.height();
function initialize(){
setup();
$window.on('resize', resize);
$next.on('click', function(){ slide(true); });
// $prevにclickイベントを登録します。
// $prevをクリックしたら、関数sliderの引数にtrueを渡して実行します。
$prev.on('click', function(){ slide(false); });
// windowにscrollイベントを登録します。
// スクロールイベントが起きるたびに、関数scrollを実行します。
$window.on('scroll', scroll);
load();
if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval);
};
function setup(){
for(var i = shift; i > 0; i--) $element.find('li').eq(len - i).remove().prependTo($element);
for(var i = 0; i < 2; i++) $('<div class="layer"></div>').insertAfter($element);
$leftlayer = $container.find('.layer').eq(0);
$rightlayer = $container.find('.layer').eq(1);
resize();
};
function resize(){
var _val = ($window.width() - lw) / 2 - lw * shift;
$element.css({
'width': lw * len,
'left': _val
});
$leftlayer.css('left', _val + lw);
$rightlayer.css('left', _val + lw * 3);
};
function slide(direction){
if($element.filter(':animated').length) return;
if(options.auto) clearInterval(timer);
以下HTMLです。
<div id="slider">
<ul class="clearfix">
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
<li><a href="#"><img src="" alt="" width="" height="" /></a></li>
</ul>
<p id="prev"><img src="" alt="" width="" height=""></p>
<p id="next"><img src="" alt="" width="" height=""></p>
<!-- /slider --></div>
<div id="wrapper">
<div class="inner">
<img src="/logo.png" alt="" width="" height="" class="logo"/>
<!-- /inner --></div>
<!-- /wrapper --></div>
以下ヘッダー部分のCSSです。
#header{
width: 100%;
}
#header h1{
padding: 10px 0;
background-color: rgba(0,0,0,0.2);
}
#header h1 span{
display: block;
}
#header #nav{
background-color: rgba(0,0,0,0.6);
}
#header #nav li{
float: left;
}
#header #nav a{
display: block;
padding: 15px;
text-decoration: none;
color: #fff;
font-family: Helvetica,Arial,sans-serif,メイリオ;
}
#header #nav a:hover{
color:#666;
background: #fff;
}
お手数をお掛け致しますがどうぞ宜しくお願い致します。
お礼
お返事遅くなりすみません。 DIVに変更したんですけど。できませんでした。 やり方がまちがっているのでしょうかね。 もう少し、頑張ってみます。 ありがとうございます。