左部导航栏的实现

演示.gif

想实现上图所示功能：上面包含几个选项，左边是导航栏。首先想到的是frameset，但是鉴于html5中已经删掉了这个元素，所以就考虑用iframe来实现。

• 首先大致画个预期效果图

无标题.png

一共包括五个文件，位于同一目录下：

1.iframe.html
2.iframe.css
3.left1.html
4.left2.html
5.index.html

分别用三个span来作为容器，其中右下的span内嵌套iframe用来显示内容。
代码：

• 具体例子
  1.iframe.html框架界面

        
              
              
              
      
      
          
              

                    
第一项
                    
第二项
                    
第三项
                    
第四项
                    
第五项
              
        
        
              

                    
左一
                    
左二
              
         
         
            
        
    

2.iframe.css样式文件

body {
height: 800px;
width: 600px;
margin: 0;
padding: 0;
}
span{
margin-left: 100px;
}
.top {
background: gray;
width:800px;
height: 50px;
position: absolute;
left: 0;
top: 0;
}
.top li{
float:left;
list-style-type: none;
margin-left:80px;
}
.top a:link{
text-decoration: none;
color:white;
}
.top a:hover{
background: black;
text-decoration:underline;
}
.left {
background: pink;
position: absolute;
left: 0px;
top: 60px;
height:400px;
width:200px;
}

.right {
background: pink;
height:400px;
width:580px;
position: absolute;
left: 220px;
top: 60px;
}

3.left.html1 点击左侧“左一”时需要在下右部显示的内容

这里对应左一

4.left.html2 点击左侧“左二”时需要在下右部显示的内容

这里对应左二

5.index.html 下右部默认显示的内容

这是默认界面及点击上部五个选项显示的内容，如需更改，需更改iframe中top内的超链接。

另外附上frameset的实现方法##