如何添加边栏导航

-4

我想添加边栏导航菜单到我的HTML页面。这里是我的代码如何添加边栏导航

<html> 
    <head> 
    <title>Admin dashboard</title> 
    </head> 
     <header style="height:100px; background-color:#666; padding- top:35px"><h2 style="color:#FFF">Dashboard</h2></header> 
    <body> 
    <div style="width:100%; height:100px"> 

     <div style="background-color:#aaa; height:550px;width:200px;float:left;"> 
     <div><b>Main Menu</b></div> 
     HTML<br /> 
     PHP<br /> 
     PERL... 
     </div> 
     <div style="background-color:#eee; height:550px;width:1132px;float:left;"> 
     <p></p> 
     </div> 



     <div style="background-color:#b5dcb3;clear:both"> 
    <center> 
    [email protected] 
    </center> 
    </div> 
    </div> 
    </body> 
    </html>

我想增加侧边栏导航菜单下面的代码

<div style="background-color:#aaa; height:550px;width:200px;float:left;"> 
      <div><b>Main Menu</b></div> 
       HTML<br /> 
       PHP<br /> 
       PERL... 
       </div>

如何添加呢？

来源

2017-04-19 Debasish Choudhury

可以请你[编辑]正确的问题？ –

你尝试过什么吗？ – TricksfortheWeb

我已经尝试从W3学校，但不工作 –

首先，几个指针：

使用<!DOCTYPE html>。
您的内容应始终位于<body>之内。 <header>标签位于两者之间的某处。
请勿使用内联样式。
使用position风格固定和其他属性。

片段

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
header { 
 
    background-color: #666; 
 
    color: #fff; 
 
    line-height: 2.5; 
 
    padding: 10px; 
 
    height: 80px; 
 
} 
 

 
main { 
 
    padding-left: 220px; 
 
} 
 

 
aside { 
 
    position: fixed; 
 
    left: 0; 
 
    width: 200px; 
 
    background-color: #aaa; 
 
    top: 100px; 
 
    bottom: 0; 
 
    overflow: auto; 
 
}

<header> 
 
    <h1>Dashboard</h1> 
 
</header> 
 
<main> 
 
    <aside> 
 
    <h3>Main Menu</h3> 
 
    <ul> 
 
     <li>HTML</li> 
 
     <li>PERL</li> 
 
     <li>PHP</li> 
 
    </ul> 
 
    </aside> 
 
</main>

注：我已经给overflow: auto到侧边栏，因此，如果内容溢出，你得到滚动条不影响主内容的滚动条。

片段与大型内容

$(function() { 
 
    $("aside ul").append(function() { 
 
    return Array.apply(null, {length: 101}).map(Number.call, Number).map((x) => "<li>Item " + x + "</li>").join(""); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
header { 
 
    background-color: #666; 
 
    color: #fff; 
 
    line-height: 2.5; 
 
    padding: 10px; 
 
    height: 80px; 
 
} 
 

 
main { 
 
    padding-left: 220px; 
 
} 
 

 
aside { 
 
    position: fixed; 
 
    left: 0; 
 
    width: 200px; 
 
    background-color: #aaa; 
 
    top: 100px; 
 
    bottom: 0; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <h1>Dashboard</h1> 
 
</header> 
 
<main> 
 
    <aside> 
 
    <h3>Main Menu</h3> 
 
    <ul> 
 
     <li>HTML</li> 
 
     <li>PERL</li> 
 
     <li>PHP</li> 
 
    </ul> 
 
    </aside> 
 
</main>

来源

2017-04-19 21:14:38

没关系，但我需要隐藏主菜单下的内容。点击主菜单后，内容应该可见...它的下拉菜单。 –

如何添加边栏导航

回答

相关问题