class App extends React.Component {
render() {
return (
<Navbar />
);
}
}
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = {
swtichClass: 'drop-menu drop-hide',
};
this.changeClass = this.changeClass.bind(this);
}
changeClass() {
if(this.state.swtichClass === 'drop-menu drop-hide') {
this.setState({swtichClass: 'drop-menu'});
} else {
this.setState({swtichClass: 'drop-menu drop-hide'});
}
}
render() {
return (
<div id="nav" className="nav">
<NavIcons classState={this.state.swtichClass} changeClass={this.changeClass} />
<NavText classState={this.state.swtichClass} changeClass={this.changeClass} />
<NavInfo/>
</div>
);
}
}
class NavIcons extends React.Component {
constructor(props){
super(props);
this.chevSwitch = this.chevSwitch.bind(this);
}
chevSwitch() {
if(this.props.classState === 'drop-menu drop-hide'){
return 'fa fa-chevron-circle-right';
} else {
return 'fa fa-chevron-circle-down';
}
}
render() {
return (
<div className="icon">
<ul>
<li className="main-nav-btn"><a href="#"><i className="fa fa-phone"></i></a></li>
<li className="main-nav-btn" onClick={this.props.changeClass}><a href="#"><i className={this.chevSwitch()}></i></a></li>
<div className={this.props.classState}>
<li className="sub-nav-btn"><a href="#"><i className="fa fa-facebook fb-col"></i></a></li>
<li className="sub-nav-btn"><a href="#"><i className="fa fa-twitter twit-col"></i></a></li>
<li className="sub-nav-btn"><a href="#"><i className="fa fa-instagram ig-col"></i></a></li>
</div>
<li className="main-nav-btn"><a href="#"><i className="fa fa-user-circle"></i></a></li>
</ul>
</div>
);
}
}
class NavInfo extends React.Component {
render() {
return (
<div className="info">
<img width="50px"
alt="Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Cool_TV_logo_2004.svg/2000px-Cool_TV_logo_2004.svg.png"
className="navbar-logo"/>
<div className="row">
<div className="social">
<a target="_blank" href="https://www.facebook.com/"><i className="fa fa-facebook tang-nav-social"></i></a>
<a target="_blank" href="https://www.instagram.com"><i className="fa fa-instagram tang-nav-social"></i></a>
</div>
</div>
</div>
);
}
}
class NavText extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div className="text">
<ul>
<li className="main-nav-btn"><a href="#">Call</a></li>
<li className="main-nav-btn" onClick={this.props.changeClass}><a href="#">Drop</a></li>
<div className={this.props.classState}>
<li className="sub-nav-btn fb-col"><a href="#">Facebook</a></li>
<li className="sub-nav-btn"><a href="#">Twitter</a></li>
<li className="sub-nav-btn ig-col"><a href="#">Instagram</a></li>
</div>
<li className="main-nav-btn"><a href="#">Title</a></li>
</ul>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
@import url('https://fonts.googleapis.com/css?family=Lato');
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
background-color: red;
font-family: 'Lato', sans-serif;
}
.drop-hide {
display:none !important;
}
.drop-menu {
display: block;
}
.nav {
height: 100%;
position: fixed;
left: -2em;
top: 0;
padding-top: 150px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.navbar-logo {
position: relative;
margin-bottom: 50px;
/*right: 0;
left: 0;
margin: 0 auto;*/
}
.fb-col {
color: #3B5998 !important;
}
.twit-col {
color: #1DA1F2 !important;
}
.ig-col {
color: #635AC8 !important;
}
.nav .icon .circle {
position: absolute;
border: solid 1px #222;
margin-top: -18px;
right: 20px;
width: 8px;
height: 8px;
border-radius: 4px;
}
.nav .icon {
position: absolute;
left: 0;
top: 0;
z-index: 990;
height: 100%;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 0%, #000000 10%, #1c1c1c 91%, #2c2c2c 100%, #111111 100%, #131313 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */
}
.nav .icon li {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
list-style-type: none;
}
.nav .icon a {
display: block;
width: 64px;
text-align: center;
color: whitesmoke;
text-shadow: 0 1px 0 black;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.main-nav-btn {
height: 64px;
line-height: 64px;
font-size: 1.3em;
}
.sub-nav-btn {
height: 40px;
line-height: 40px;
font-size: 1.1em;
}
.nav .icon a:hover {
color: white;
}
.nav:hover .text {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.nav .text {
position: absolute;
left: 63px;
top: 0;
z-index: 980;
width: 160px;
height: 100%;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 0%, #000000 10%, #1c1c1c 91%, #2c2c2c 100%, #111111 100%, #131313 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */
border-right: 1px solid rgba(0, 0, 0, 0.3);
-webkit-transition: -webkit-transform .24s linear;
transition: -webkit-transform .24s linear;
transition: transform .24s linear;
transition: transform .24s linear, -webkit-transform .24s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(1000px) translateX(-200px);
transform: perspective(1000px) translateX(-200px);
}
.nav .text li {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.nav .text a {
display: block;
text-indent: 1em;
text-decoration: none;
color: whitesmoke;
text-shadow: 0 1px 0 black;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.nav .text .main-nav-btn {
height: 64px;
line-height: 64px;
font-size: 1em;
}
.nav .text .sub-nav-btn {
height: 40px;
line-height: 40px;
font-size: 0.8em;
}
.nav .text a:hover {
color: white;
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
}
.nav:hover .info {
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in 0.1s;
transition: opacity 0.5s ease-in 0.1s;
width: 150px;
margin-left: 50px;
}
.nav .info {
position: absolute;
bottom: 165px;
z-index: 998;
color: white;
text-align: center;
line-height: 1.6;
opacity: 0;
}
.nav .info .logo p {
width: 100px;
height: 100px;
margin: 0 auto;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 0%, #000000 10%, #1c1c1c 91%, #2c2c2c 100%, #111111 100%, #131313 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 0%,#000000 10%,#1c1c1c 91%,#2c2c2c 100%,#111111 100%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */
color: #424242;
opacity: .6;
overflow: hidden;
text-align: center;
-webkit-transition: all .5s ease;
transition: all .5s ease;
font-size: 2em;
text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;
}
.nav .info .logo p:hover {
opacity: 1;
color: white;
text-shadow: -1px -1px #575757, 1px 1px #121212;
}
.nav .info .name {
font-size: 1.4em;
font-weight: bold;
letter-spacing: 2px;
color: #E98300;
}
.nav .info .kicker {
font-size: 0.8em;
font-weight: bold;
letter-spacing: 2px;
color: whitesmoke;
}
.nav .info .quote {
font-size: 0.7em;
color: lightgrey;
text-shadow: 1px 1px #121212;
}
.social {
display: inline-block;
}
.social a {
color: red;
}
.nav .info .social a {
font-size: 2em;
letter-spacing: .5em;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.nav .info .social a:hover {
color: whitesmoke !important;
/*text-shadow: -1px -1px #222, 1px 1px #333;*/
}
.tang-nav-social {
color: #222;
cursor: pointer;
}
.tang-nav-social: hover {
cursor: pointer;
color: whitesmoke;
}
@media screen and (max-height: 550px) {
.nav .info {
display: none;
}
}
@media screen and (max-width: 450px) {
.nav h1 {
font-size: 7.5vw;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
ニース1、ありがとう！ – Apswak