Make menu bar
Find out index.html and edit it. add some style code.
final out put will be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
-ms-overflow-style: scrollbar;
-webkit-app-region:drag;
}
li {
float: left;
font-size: 16px;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
</style>
</head>
<style>
body {
font-family: 'Roboto';font-size: 48px; font-weight: 300;
background-color: #2B2E3B; margin: 0; padding: 0;
color: #C1F4FE;
}
#svg{
margin: 200px 0 0 0;
}
</style>
<body align="center">
<ul>
<li><a href="#home">Home</a></li>
</ul>
<div id="svg"> <img src="electron.svg" alt="electron"> </div>
<p>Draggable Window</p>
</body>
</html>
here in the ui style code
-ms-overflow-style: scrollbar;
-webkit-app-region:drag;
is used to enable dragging. Drag is enable only for menu bar.
output screen will be like
code used in this can be download here .
Post a Comment