mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 15:46:10 +08:00
149 lines
4.0 KiB
Markdown
149 lines
4.0 KiB
Markdown
---
|
|
order: 1
|
|
title:
|
|
zh-CN: 顶部导航 + 侧边栏
|
|
en-US: Top aside
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
顶级导航在头部，次级导航在侧边栏。
|
|
|
|
## en-US
|
|
|
|
The top navigation is placed on the top, and the secondary navigation is placed on the aside.
|
|
|
|
````jsx
|
|
import { Menu, Breadcrumb, Icon } from 'antd';
|
|
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
|
const SubMenu = Menu.SubMenu;
|
|
|
|
ReactDOM.render(
|
|
<BrowserDemo>
|
|
<div className="layout-topaside">
|
|
<div className="layout-header">
|
|
<div className="layout-wrapper">
|
|
<div className="layout-logo"></div>
|
|
<Menu theme="dark" mode="horizontal"
|
|
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
|
<Menu.Item key="1">Navigation 1</Menu.Item>
|
|
<Menu.Item key="2">Navigation 2</Menu.Item>
|
|
<Menu.Item key="3">Navigation 3</Menu.Item>
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
<div className="layout-subheader">
|
|
<div className="layout-wrapper">
|
|
<Menu mode="horizontal"
|
|
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
|
<Menu.Item key="1">Second nav</Menu.Item>
|
|
<Menu.Item key="2">Second nav</Menu.Item>
|
|
<Menu.Item key="3">Second nav</Menu.Item>
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
<div className="layout-wrapper">
|
|
<Breadcrumb>
|
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
|
<Breadcrumb.Item>App list</Breadcrumb.Item>
|
|
<Breadcrumb.Item>Any app</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div className="layout-container">
|
|
<aside className="layout-sider">
|
|
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
|
<SubMenu key="sub1" title={<span><Icon type="user" />Navigation 1</span>}>
|
|
<Menu.Item key="1">item 1</Menu.Item>
|
|
<Menu.Item key="2">item 2</Menu.Item>
|
|
<Menu.Item key="3">item 3</Menu.Item>
|
|
<Menu.Item key="4">item 4</Menu.Item>
|
|
</SubMenu>
|
|
<SubMenu key="sub2" title={<span><Icon type="laptop" />Navigation 2</span>}>
|
|
<Menu.Item key="5">item 5</Menu.Item>
|
|
<Menu.Item key="6">item 6</Menu.Item>
|
|
<Menu.Item key="7">item 7</Menu.Item>
|
|
<Menu.Item key="8">item 8</Menu.Item>
|
|
</SubMenu>
|
|
<SubMenu key="sub3" title={<span><Icon type="notification" />Navigation 3</span>}>
|
|
<Menu.Item key="9">item 9</Menu.Item>
|
|
<Menu.Item key="10">item 10</Menu.Item>
|
|
<Menu.Item key="11">item 11</Menu.Item>
|
|
<Menu.Item key="12">item 12</Menu.Item>
|
|
</SubMenu>
|
|
</Menu>
|
|
</aside>
|
|
<div className="layout-content">
|
|
<div style={{ height: 240 }}>
|
|
<div style={{clear: 'both'}}>Contents</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="layout-footer">
|
|
Ant Design all rights reserved © 2015 Created by Ant UED
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BrowserDemo>
|
|
, mountNode);
|
|
````
|
|
|
|
````css
|
|
.layout-topaside {
|
|
height: 100%;
|
|
}
|
|
|
|
.layout-topaside .layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.layout-topaside .layout-header {
|
|
background: #404040;
|
|
height: 64px;
|
|
}
|
|
|
|
.layout-topaside .layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 4px;
|
|
margin: 16px 24px 16px 0;
|
|
float: left;
|
|
}
|
|
|
|
.layout-topaside .layout-subheader {
|
|
height: 48px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
background: #fff;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.layout-topaside .layout-container {
|
|
background: #fff;
|
|
margin: 12px 0 0;
|
|
position: relative;
|
|
padding: 24px 0;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.layout-topaside .layout-sider {
|
|
width: 224px;
|
|
float: left;
|
|
}
|
|
|
|
.layout-topaside .layout-content {
|
|
border-left: 1px solid #e9e9e9;
|
|
padding: 0 24px;
|
|
overflow: auto;
|
|
position: relative;
|
|
left: -1px;
|
|
}
|
|
|
|
.layout-topaside .layout-footer {
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
````
|