ホームページのデザインに関して

質問

質問失礼します。
現在、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;
}

お手数をお掛け致しますがどうぞ宜しくお願い致します。

回答No.2

Taiyonoshizuku · ベストアンサー

質問がありますって言ってるけど、これ１．２．３の通りに作ってってのと一緒だよね。
lancers.jp
このあたりで依頼出せば3,000円くらいでやってくれるひとがいると思うよ。

回答No.1

muuming2001

ご質問はなんでしょう？

ソースを記載しとくので、希望の仕様通りしあげてください？