导航条

src/App.css

@@ -92,3 +92,51 @@
   padding-bottom:0px;
 }
 
+.square{
+  padding-right:20px;
+  float:right;
+  cursor:pointer;
+  font-size:22px;
+  color:#aaa;
+}
+.square:hover{
+  color:#fff;
+}
+.caidan {
+  z-index: 1;
+  width:100%;
+  position:fixed;
+  top:64px;
+
+}
+.caidan li{
+  line-height: 40px;
+  height:40px;
+  padding: 0 20px;
+  color:white;
+  background:#404040;
+  border-top:#777 solid 1px;
+  font-size:14px;
+}
+.caidan li:hover{
+  background:#777;
+}
+.chidden{
+  animation: downotup 0.5s;
+  -webkit-animation:downotup 0.5s;
+  transform:translate(0,-1000px)
+}
+.cshow{
+  animation: uptodown 0.5s;
+  -webkit-animation:uptodown 0.5s;
+  transform:translate(0,0px)
+}
+
+@keyframes uptodown{
+  from{transform:translate(0,-1000px)}
+  to{transform:translate(0,0px)}
+}
+@keyframes downotup{
+  from{transform:translate(0,0px)}
+  to{transform:translate(0,-1000px)}
+}
\ No newline at end of file

src/App.js

@@ -98,9 +98,15 @@ export default class App extends Component {
 
     return (
       <Layout>
-        <Header style={{position:'fixed' ,zIndex:'9',width:'100%'}}>
+
+      {!isMobile ? 
+        (<Header style={{width:'100%'}}>
+          <Nav_Mobile isMobile={isMobile} />
+        </Header>):
+        (<Header style={{width:'100%', padding:0}}>
           <Nav_Mobile isMobile={isMobile} />
         </Header>
+      )}
       
         <Content className="App-Content1">
           {!isMobile ? 

src/Nav.js

 import React from 'react'
 import { Menu ,Icon ,Dropdown} from 'antd'
 import { FormattedMessage } from 'react-intl'
-// const SubMenu = Menu.SubMenu;
-// const MenuItemGroup = Menu.ItemGroup;
 
 export default class Nav_Mobile extends React.Component{
 
-  handleClick = (e) => {
-    console.log('click ', e);
+  constructor(props){
+    super(props);
+    this.state = {
+      classCaidan: false,
+    };
+  }
+  caidan=()=>{
+    this.setState({classCaidan:!this.state.classCaidan});
   }
   render() {
-    const menu=(
-          <Menu style={{width:'100%'}}>
-            <Menu.Item key="0">
-              <a href="#">1st menu item</a>
-            </Menu.Item>
-            <Menu.Item key="1">
-              <a href="#">2nd menu item</a>
-            </Menu.Item>
-            <Menu.Divider />
-            <Menu.Item key="3">3d menu item</Menu.Item>
-          </Menu>
-    )
+    var classCaidan=this.state.classCaidan;
     if(!this.props.isMobile){
       return (
         <div>
@@ -48,19 +41,28 @@ export default class Nav_Mobile extends React.Component{
       );
     }else{
       return (
-        <div >
-          <div className="App-Logo">
-            <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
-            <span>MoeCube</span>           
+        <div>
+          <div style={{position:'fixed',zIndex:10,width:'100%',background:'#404040'}}>
+            <div className="App-Logo">
+              <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
+              <span>MoeCube</span>           
+            </div>
+            <div className="square" onClick={this.caidan}>
+              <Icon type="down-circle-o" />
+            </div>
           </div>
-
-          <Dropdown overlay={menu} trigger={['click']}>
-            <a className="ant-dropdown-link" href="#">
-              Click me <Icon type="down" />
+          <ul className={ classCaidan ? "caidan cshow" : "caidan chidden" }>
+            <a href="#">
+              <li>
+                <FormattedMessage id={"Home"}/>  
+              </li>          
             </a>
-          </Dropdown>
-
-          
+            <a href="https://ygobbs.com/">
+              <li>
+                <FormattedMessage id={"BBS"}/>
+              </li>
+            </a>
+          </ul>
         </div>
       )
     }