jQuery教學-側邊固定滑出式選單

梅問題-jQuery範例-側邊滑動式選單
  現在應該可發現到,有不少的網站,在頁面的左右二側,會有一塊色塊,固定在那邊,當滑鼠滑入後,就會展開,有些是放選單,有些則是放Facebook,其實不管是放什麼內容,基本上運作原理都相同,而那一天有朋友問到,這是怎麼弄的,所以梅干就花了點時間,寫了一個簡單的小範例,當滑鼠滑入,選單就推出來,當滑鼠移開後,選單就會再縮回去,同時也會固定在左半邊,有需要的朋友,可以參考看看囉!

先來了解一下結構與運作的部分,首先梅干利用一個Div,裡面再包二個Div,綠色是滑鼠滑入時展開,當滑鼠移開藍色區塊時,選單就再縮回去。
梅問題-jQuery範例-側邊滑動式選單
CSS樣式:
放在<head>.....</head>之間:
#mwt_mwt_slider_scroll
{
	top: 0;
	left:-360px;
	width:360px;	
	position:fixed;
	z-index:9999;
}

#mwt_slider_content{
	background:#3c5a98;
	text-align:center;
	padding-top:20px;
}

#mwt_fb_tab {
	position:absolute;
	top:20px;
	right:-24px;
	width:24px;
	background:#3c5a98;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;	
	text-align:center;
	padding:9px 0;

	-moz-border-radius-topright:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-right-radius:10px;	
}
#mwt_fb_tab span {
	display:block;
	height:12px;
	padding:1px 0;
	line-height:12px;
	text-transform:uppercase;
	font-size:12px;
}

Javascript:
放在<head>.....</head>之間:
<script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript'>
$(function(){
	var w = $("#mwt_slider_content").width();
	$('#mwt_slider_content').css('height', ($(window).height() - 20) + 'px' ); //將區塊自動撐滿畫面高度
	
	$("#mwt_fb_tab").mouseover(function(){ //滑鼠滑入時
		if ($("#mwt_mwt_slider_scroll").css('left') == '-'+w+'px')
		{
			$("#mwt_mwt_slider_scroll").animate({ left:'0px' }, 600 ,'swing');
		}
	});
	
	
	$("#mwt_slider_content").mouseleave(function(){ //滑鼠離開後
		$("#mwt_mwt_slider_scroll").animate( { left:'-'+w+'px' }, 600 ,'swing');	
	});	
});

</script>
HTML:
放在<body>.....</body>之間:
<div id="mwt_mwt_slider_scroll">
 <div id="mwt_fb_tab">
    <span>F</span>
    <span>a</span>
    <span>c</span>
    <span>e</span>
    <span>b</span>
    <span>o</span>
    <span>o</span>
    <span>o</span>
    <span>k</span>	
</div>
<div id="mwt_slider_content">
    <iframe src="https://www.facebook.com/plugins/likebox.php?id=208757309728&width=200&connections=10&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:270px;" allowTransparency="true"></iframe>
</div>
</div>

[範例預覽][範例下載]

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 24 梅留言

1 6 7 8