Skip to content

P
Penguidom
Commit 710ed0fa authored by Franco (nextime) Lanza's avatar Franco (nextime) Lanza
Browse files
Options

Working on basic layout for GUI

parent bae78463
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 20 deletions
Web/resources/page.html
View file @ 710ed0fa
......@@ -42,6 +42,11 @@ body {
padding: 16px;
}
#main {
transition: margin-left .5s;
transition: margin-right .5s;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
......@@ -55,9 +60,35 @@ body {
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1000; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.column {
float: left;
width: 33.33%;
overflow-y: scroll;
height: 400px;
/* border: 1px solid white; */
}
/* Clear floats after the columns */
......@@ -105,7 +136,6 @@ body {
text-align: center;
color: #f2f2f2;
padding: 14px;
}
div .menubtn {
......@@ -122,33 +152,69 @@ div .menubtn div {
}
</style>
<script language="javascript">
function OpenLeft() {
document.getElementById("SidenavRight").style.width = "0px";
document.getElementById("SidenavLeft").style.width = "250px";
}
function OpenRight() {
document.getElementById("SidenavLeft").style.width = "0px";
document.getElementById("SidenavRight").style.width = "250px";
}
function CloseNav() {
document.getElementById("SidenavLeft").style.width = "0px";
document.getElementById("SidenavRight").style.width = "0px";
}
</script>
@SCRIPT@
</head>
<body class="tblack">
<div id="navbar" class="row">
<div id="navbtnl">
<div class="menubtn">
<div></div>
<div></div>
<div></div>
<div id="SidenavLeft" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="CloseNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="SidenavRight" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="CloseNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<div id="navbar" class="row">
<div id="navcntr">
<b>Penguidom 0.1</b>
</div>
<div id="navbtnl" onclick="OpenLeft()">
<div class="menubtn">
<div></div>
<div></div>
<div></div>
</div>
<a href="#">plugins</a>
</div>
<div id="navbtnr" onclick="OpenRight()">
<div class="menubtn" style="float:right;">
<div></div>
<div></div>
<div></div>
</div>
<a href="#">options</a>
</div>
<a href="#">plugins</a>
</div>
<div id="navcntr">
<b>Penguidom 0.1</b>
</div>
<div id="navbtnr">
<div class="menubtn" style="float:right;">
<div></div>
<div></div>
<div></div>
<div id="content" class="tblack" >
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<a href="#">options</a>
@CONTENT@
</div>
</div>
<div id="content" class="tblack" >
@CONTENT@
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment