在的移動端頁面中，很多網站都用到了側邊切換菜單欄功能，針對于該功能， 利用CSS3的知識，寫了一個實現側滑的效果。

效果展示如下：

HTML:首先寫好側邊的布局。然后不是側邊的內容塊最好用一個內容塊包圍住。

CSS樣式

給側邊菜單定位，起始位置為left:-50%,當點擊菜單的展開按鈕，側邊菜單就加上open類目，讓left:值為0，即展開切換。同理。main也一樣。

JQ代碼

當點擊菜單展開按鈕 定義類名為 f-lei，側邊菜單切換添加刪除類open, 主內容切換添加刪除類show。當側邊展開時，點擊展開的剩余背景能收縮展開的菜單欄。

eb開發。不管是在工作還是在學習中，掌握一些實用的開發小技巧，你的效率都會大大提升哦！

一、將填充和邊距都設置為零

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

也有使用通配符*{padding:0;margin:0;}網站利弊端都各有其說法，對于*號這種，是把所有元素的內外邊距都設置為了0，可能有些會出現些小細節的問題，所以選擇你適用的方案吧

二、重置瀏覽器的字體大小

body {

font:12px "宋體", Arial, Helvetica, sans-serif;

color: #000;

}

不保證所有的用于都安裝有你設置的字體，所以通常會在后面加上幾個通用的web安全字體

三、元素/標簽選擇器

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}

table { border-collapse:collapse; border-spacing:0;}

img { border:0;}

ol,ul { list-style:none; }

p{word-wrap:break-word}

四、站點鏈接

站點鏈接的樣式必須保持此順序，包括用于創建懸停效果的選擇器組在內

a:link {

color: #42413C;

text-decoration: none;

}

a:visited {

color: #6E6C64;

}

a:hover, a:active, a:focus {

text-decoration: underline;

}

五、設置水平居中

1）固定寬度 大多數的網站目前都是固定寬度的代碼如下：

#container { width:1000px;margin: 0 auto;}

2）如果是用百分百來定義寬度的話，可以這樣使用：

#container {

width: 80%;

max-width: 1260px; /* 最大寬度，IE6 不遵循max-width、min-width 此聲明。 */

min-width: 780px; /* 最小寬度 */

margin: 0 auto; /* 如果將 #container 寬度設置為 100%，則不需要此設置。 */

}

六、可以重復利用的規則

.left {float: left;}

.right {float: right;}

七、在同一元素上使用多種類

加粗的紅色字體，使用了兩種類

CSS代碼：

.red {color: red;}

.bold {font-weight: bold;}

Html代碼：

<p class="red bold">同一元素使用兩種類</p>

八、隱藏水平滾動條

為了避免出現水平滾動條，在body里加入 overflow-x:hidden

body{overflow-x:hidden}

九、解決IE6 的浮動元素的雙倍邊距問題

對一個div設置了float:left 和 margin-left:100px 那么在IE6中，這個bug就會出現。您只需要多設置一個display即可，代碼如下：

div {float:left;margin:40px;display:inline;}

IE6下圖片也會產生3像素的空白距離，也用到display

img{display:block}

十、簡單的導航菜單

用html5 css3 的新語義標簽來寫一下這段導航菜單代碼

html代碼：

<nav>

<ul>

<li><a >網站首頁</a></li>

<li><a >個人博客模板</a></li>

<li><a >慢生活</a></li>

</ul>

</nav>

CSS代碼：

nav ul li { display:inline;margin-right:10px;}

nav ul li a {color:#000;display:block;float:left;padding:5px;}

nav ul li a:hover {background:#eee;color:black;}

}

如果想選中的導航能高亮顯示，可以加上一段js代碼：

<script language="javascript">

var obj=null;

var As=document.getElementById('nav').getElementsByTagName('a');

obj = As[0];

for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)

obj=As[i];}

obj.id='nav_current'

</script>

提示：為了讓js能夠獲取到菜單的id取值，所以應該給html中的nav標簽添加一個id

<nav id="nav">

高亮顯示的樣式nav_current 也應該在css中寫上一段代碼，比如：

#nav_current{background:#eee;color:red;}

如果你喜歡這篇文章，可以關注作者頭條公眾號，每天都會有精彩web干貨與你一起分享哦！