showing results for - "convert html code into react js component"
Philipp
23 May 2018
1<!DOCTYPE html>
2<html>
3<head>
4<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
5<style>
6* {
7  box-sizing: border-box;
8}
9
10body {
11  margin: 0;
12}
13
14.navbar {
15  overflow: hidden;
16  background-color: #333;
17  font-family: Arial, Helvetica, sans-serif;
18}
19
20.navbar a {
21  float: left;
22  font-size: 16px;
23  color: white;
24  text-align: center;
25  padding: 14px 16px;
26  text-decoration: none;
27}
28
29.dropdown {
30  float: left;
31  overflow: hidden;
32}
33
34.dropdown .dropbtn {
35  font-size: 16px;  
36  border: none;
37  outline: none;
38  color: white;
39  padding: 14px 16px;
40  background-color: inherit;
41  font: inherit;
42  margin: 0;
43}
44
45.navbar a:hover, .dropdown:hover .dropbtn {
46  background-color: red;
47}
48
49.dropdown-content {
50  display: none;
51  position: absolute;
52  background-color: #f9f9f9;
53  width: 100%;
54  left: 0;
55  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
56  z-index: 1;
57}
58
59.dropdown-content .header {
60  background: red;
61  padding: 16px;
62  color: white;
63}
64
65.dropdown:hover .dropdown-content {
66  display: block;
67}
68
69/* Create three equal columns that floats next to each other */
70.column {
71  float: left;
72  width: 33.33%;
73  padding: 10px;
74  background-color: #ccc;
75  height: 250px;
76}
77
78.column a {
79  float: none;
80  color: black;
81  padding: 16px;
82  text-decoration: none;
83  display: block;
84  text-align: left;
85}
86
87.column a:hover {
88  background-color: #ddd;
89}
90
91/* Clear floats after the columns */
92.row:after {
93  content: "";
94  display: table;
95  clear: both;
96}
97
98/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
99@media screen and (max-width: 600px) {
100  .column {
101    width: 100%;
102    height: auto;
103  }
104}
105</style>
106</head>
107<body>
108
109<div class="navbar">
110  <a href="#home">Home</a>
111  <a href="#news">News</a>
112  <div class="dropdown">
113    <button class="dropbtn">Dropdown 
114      <i class="fa fa-caret-down"></i>
115    </button>
116    <div class="dropdown-content">
117      <div class="header">
118        <h2>Mega Menu</h2>
119      </div>   
120      <div class="row">
121        <div class="column">
122          <h3>Category 1</h3>
123          <a href="#">Link 1</a>
124          <a href="#">Link 2</a>
125          <a href="#">Link 3</a>
126        </div>
127        <div class="column">
128          <h3>Category 2</h3>
129          <a href="#">Link 1</a>
130          <a href="#">Link 2</a>
131          <a href="#">Link 3</a>
132        </div>
133        <div class="column">
134          <h3>Category 3</h3>
135          <a href="#">Link 1</a>
136          <a href="#">Link 2</a>
137          <a href="#">Link 3</a>
138        </div>
139      </div>
140    </div>
141  </div> 
142</div>
143
144<div style="padding:16px">
145  <h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
146  <p>Hover over the "Dropdown" link to see the mega menu.</p>
147  <p>Resize the browser window to see the responsive effect.</p>
148</div>
149
150</body>
151</html>
152