如题。希望这一次能够实现如下的右侧导航的效果:
让我来分析一下这个导航栏的效果是怎么实现的吧。
1.我们要有一张图片,用一个盒子来包住他。Map那块先不管他吧。
<!--右边导航栏-->
<div class="right-nav" id="right-nav">
<img usemap="#test" id="pic" class="pic" src="../res/right-nav.png" />
<map id="test" name="test">
<area shape="rect" coords="5,299,121,336" href="#f1" />
<area shape="rect" coords="6,336,120,362" href="#" />
<area shape="rect" coords="7,361,120,384" href="#" />
<area shape="rect" coords="5,383,120,412" href="#" />
<area shape="rect" coords="7,413,122,440" href="#" />
<area shape="circle" coords="61,472,31" href="#" />
<area shape="circle" coords="60,252,42" href="#f0" />
</map>
</div>
2.添加了这张图片之后,我们要先让他给我们定位到右侧要的位置上去:这里使用jquery的一个函数来实现这种效果,所以你的网页先要引入一个jquery的库啦。这里就不引入演示了。将下面这段js代码放到script的标签里去。其中的top和right就是我们使用fixed定位的位置。可以根据你的需要来调整位置。
<!--左侧导航栏实现由小变大的效果-->
$(window).scroll(function(){
var h_num=$(window).scrollTop();
if(h_num>200){ //这里的200是指当页面滑动到200px的时候,触发下面的函数。
$('.pic').addClass('pichover');
var temp = document.getElementById("right-nav");
temp.style.position = "fixed";
temp.style.top = "30px"; //可以根据你的需要来调整fixed的位置
temp.style.right = "-3px";
}
else{ //当往回滑动时,删除该元素
$('.pic').removeClass('pichover');
}
});
实现这个功能的关键在下面的CSS。
/*左侧导航栏渐变大的css*/
.pic{
display:block;
width:123px;
margin:60px 0 0;
padding:10px 10px 15px;
-webkit-transform:rotate(0deg) scale(0.0001); /*初始的时候,我们将其大小,也即scale设置得非常小以至不可见*/
-moz-transform:rotate(0deg) scale(0.0001);
transform:rotate(0deg) scale(0.0001);
transition:all 0.3s ease-in; /*这句话就是关键,让整个变大的过程缓缓进行*/
border:none;
}
.pichover{
-webkit-transform:rotate(0deg) scale(1.0); /*当变换class的时候,通过这个transform的属性,让他变大*/
-moz-transform:rotate(0deg) scale(1.0);
transform:rotate(0deg) scale(1.0);
}
/*左侧导航栏渐变大的css结束*/
目前这个效果只能够兼容IE9/10/11,chrome,safari,firefox,在IE8以下的浏览器中是失效的。淘宝天猫上的应该也是没有实现这个兼容性的。
然后,大家可以配合锚点,来实现导航的功能。