1、div左側導航菜單
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>導航菜單</title>
<style type="text/css">
.titleStyle{
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
}
a{
color:blue;
}
body{
font-size:9pt;
}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var layerTop=20; //菜單頂邊距
var layerLeft=30; //菜單左邊距
var layerWidth=140; //菜單總寬
var titleHeight=20; //標題欄高度
var contentHeight=200; //內容區高度
var stepNo=10; //移動步數，數值越大移動越慢
var itemNo=0;runtimes=0;
document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');
function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+
'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+
'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr></table></div>';
document.write(itemHTML);
itemNo++;
}
//添加菜單標題和內容，可任意多項，注意格式：
addItem('歡迎','<BR> 歡迎光臨設計在線！');
addItem('網頁陶吧','<center><a href="#">網頁工具</a> <BR><BR><a href="#">技術平台</a> <BR><BR><a href="#">設計理念</a> <BR><BR><a href="#">更多</a></center>');
addItem('美工教室','<center><a href="#">平面設計 </a> <BR><BR><a href="#">三維空間</a> <BR><BR><a href="#">設計基礎</a> <BR><BR><a href="#">更多..</a></center>');
addItem('Flash','<center><a href="#">基礎教程</a> <BR><BR><a href="#">技巧運用</a> <BR><BR><a href="#">實例剖析</a> <BR><BR><a href="#">更多..</a></center>');
addItem('多媒體','<center><a href="#">DIRECTOR</a> <BR><BR><a href="#">Authorware</a> <BR><BR><a href="#">更多..</a></center>');
addItem('精品賞析','<center><a href="#">設計精品</a></center>');
document.write('</span>')
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;
toItemIndex=itemNo-1;onItemIndex=itemNo-1;
function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
runtimes++;
if(runtimes>=stepNo){
onItemIndex=toItemIndex;
runtimes=0;}
else
setTimeout("changeItem(toItemIndex)",10);
}
function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}
function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
changeItem(0);
//-->
</script>
</body>
</html>
2、網頁設計左側導航欄
可以用js來實現，給每一項添加滑鼠移入事件，當滑鼠移入的時候，顯示右邊提前寫好的內容，滑鼠移開後再次隱藏。
附件是我寫的一個京東頁面最頭部部分的例子
3、html 前端頁面，如果用bootstrap4製作左側菜單欄？
雖然現在不怎麼純手工敲了，但是我還是可以給你說一下思路。
你先給一個div，{width：200px;height:400px;float:left;}
在這個div裡面放10個小的div{width：200px;height:40px;}
然後就是js了，你想要什麼效果，就在hover或者click裡面加。（個人默認你懂jQ）
4、網頁導航欄模塊設計CSS控制默認第一個LI背影
像上面那種，就是定義ACTIVE屬性，使其A的背影帶色，每個頁植入對應的ACTIVE，比如，首頁專只屬植入在第一個LI，第二個頁只植入第二個LI。。。另外定義LI屬性，使其HOVER的背影跟ACTIVE的背影色一樣，這樣子移動滑鼠時對應的LI就顯示背影色，點擊後的背影色也不變。
5、網頁設計，導航菜單，我想實現一個很常見的效果
<style>
#div1{ background:url(img_1.gif) ; }
#div1:hover{ background:url(img_2.gif); }
</style>
<div id="div1">hello</div>
不需要js
6、框架網頁中如何實現左邊導航欄一點擊右邊自動變換網頁效果？？
看你發了兩次，我決定回答兩次多賺點分~~嘿嘿！
你這個框架網頁實際包含三個網頁不是。在nain文件里frame標簽下有有name="",記住引號里的東西。在left文件的鏈接標簽上加上target="",引號里是你要右邊框架的name。
如下：<a href="www.htm" target="mainFrame">
好像在main文件的frame標簽下加上target="mainFrame" 也能實現這個效果，但是我昨天沒試成功，令我很郁悶。網頁有幾種打開方式：1.在原來窗口中打開_self，2.在新窗口中打開_blank，3.在父窗口中打開_parent.自己試著玩吧，在dw中的設置是鏈接下的目標選擇。