網頁側邊欄導航設計

1、HTML5設計一個導航側邊欄？

使用公式（an+ b）.描述抄：a代表一個循環的大小，N是一個計數器（從0開始），以及b是偏移量。
p:nth-of-type(2n+0)
{
background:red;
}
p:nth-of-type(2n+1)
{
background:blue;
}

2、建設網站中的導航欄在設計時有哪些常見的樣式？

分享幾個常見的導航設計：
1、滑出導航
滑出式導航是現在很流行的一種，當用戶打開頁面時，第一眼看到的是主要的內容而非菜單，給用戶更好的第一印象。響應式全屏滑出導航也可以給人愉悅的體驗。
2、全屏導航
全屏導航設計對內容有強調作用，用戶可以更加便捷地切換到不同的頁面，讓內容成為更加觸手可及的東西。如果設計的夠合理，用戶會在無意識間充分運用起它的導航功能。
3、單頁滾動導航
對於不含有大量內容的網站而言，單頁式的導航的效果非常不錯。這樣的網站只需要簡單的向下滾動操作，內容就會持續不斷地到你的眼前。
4、垂直導航
垂直導航最流行的有兩種排版方式，一種是隱藏式的導航菜單，需要的時候點擊顯示。另外一種是固定的側邊欄來展示菜單。它為網站設計提供了一種新的視覺體驗。
導航如何使用，還是要結合你的項目的具體特徵來決定的。

3、網頁導航欄的設計方式有哪些

導航欄的設計方式有很多種，通過專業的PS設計軟體，可以結合自己的靈感設計，網上有很多可以做為參考或欣賞。

4、網頁設計左側導航欄

可以用js來實現，給每一項添加滑鼠移入事件，當滑鼠移入的時候，顯示右邊提前寫好的內容，滑鼠移開後再次隱藏。

附件是我寫的一個京東頁面最頭部部分的例子

5、網頁的側導航欄是怎樣製作的

使用方法：
1.載入jQuery和SMINT插件

1 <script type="text/javascript" src="jquery/1.7.1/jquery.min.js"></script>
2 <script type="text/javascript" src="js/jquery.smint.js"></script>
2.初始化配置

1 <script type="text/javascript">
2 $(document).ready( function() {
3 $('.subMenu').smint({
4 'scrollSpeed' : 1000
5 });
6 });
7 </script>
3.菜單配置

01 <div class="subMenu" >
02 <div class="inner">
03 <a href="#" id="sTop" class="subNavBtn">Home</a>
04 <a href="#" id="s1" class="subNavBtn">What it does</a>
05 <a href="#" id="s2" class="subNavBtn">How to use</a>
06 <a href="#" id="s3" class="subNavBtn">Demo</a>
07 <a href="#" id="s4" class="subNavBtn">Download</a>
08 <a href="#" id="s5" class="subNavBtn end">About Me</a>
09 </div>
10 </div>
4.滾動模塊定義

1 <div class="section sTop">
2 滾動內容
3 </div>
1 <div class="section s1">
2 滾動內容
3 </div>
1 <div class="section s2">
2 滾動內容
3 </div>
.........

6、HTML使用DIV+CSS如何實現左邊導航，右邊顯示內容，點擊那個導航顯示那個內容

1、新建html文檔。

2、書寫hmtl代碼。

<ul>

<li><A class="hover" href="#">前端交流</A></li>

<li><A href="#">交互設計</A></li>

<li><A href="#">視覺設計</A></li>

<li><A href="#">用戶研究</A></li>

<li><A href="#">設計茶吧</A></li>

<li><A href="#">前端交流</A></li>

<li><A href="#">團隊生活</A></li>

<div id="lanPos"></div>

</ul>

3、書寫css代碼。

<style>

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; }

body { line-height: 1; }

:focus { outline: 1; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

nav ul, ul, li { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }

a:hover { text-decoration: underline; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

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

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

.fl { float: left; display: inline-block; }

.fr { float: right; display: inline-block; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.clearfix { display: inline-table; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

html { font-size: 62.5%; /* 10÷16=62.5% */ }

body { font-size: 12px; font-size: 1.2rem; background: #F8F8F8; font-family: "宋體"; }

ul { width: 180px; margin: 0 auto; background: #fff; position: relative; z-index: 0; padding: 60px 20px 70px; }

ul li { height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #F8F8F8; }

ul li a { color: #666; display: block; }

ul li a:hover { color: #FF5F3E; text-decoration: none; }

ul li a.hover { color: #FF5F3E; }

#lanPos { width: 225px; height: 40px; line-height: 40px; background: #F8F8F8; border-left: 5px solid #FF5F3E; position: absolute; left: -5px; top: 0; z-index: -1; transition: top .2s; }

</style>

4、書寫並引用js代碼。

<script src="js/jquery.min.js"></script>

<script>

$(function(){

$('#lanPos').css('top',$('.hover').offset().top);

$('ul li').hover(function(){

$('#lanPos').css('top',$(this).offset().top);

},function(){

$('#lanPos').css('top',$('.hover').offset().top);

})

$('ul li').click(function(){

for(var i=0;i<$('ul li').size();i++){

if(this==$('ul li').get(i)){

$('ul li').eq(i).children('a').addClass('hover');

}else{

$('ul li').eq(i).children('a').removeClass('hover');

}

}

})

})

</script>

5、代碼整體結構。

6、查看效果

7、網頁側邊欄導航

給你個思路,做個div固定那個位置,然後添加圖片超鏈接!

8、網頁側邊欄這個效果是怎麼實現的？

懸浮按鈕
相對於窗口來定位，因為位置一直固定在窗口的一個位置，所以看著像懸浮
position設置為fixed，再用top,left,right,bottom等屬性定位