-
Notifications
You must be signed in to change notification settings - Fork 0
/
topAndSideNav.php
140 lines (118 loc) · 4.28 KB
/
topAndSideNav.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!--
Project: Home Inventory Helper
Branch : 2
File Name : TopNav&MenuSidebar
Version : 0.1
Started : 2019_02_10
Last updated : 2019_09_08
PURPOSE:
Define a top navigation (4 buttons) and a responsive menu sidebar with 8 sections :
- My name, my email and and text to (dis)connect.
- Home
- I prepare my moving
- I receive my items
- Objects Lists
- Save
- Share
- Bin-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Home</title>
</head>
<!--When body is resized sidenav is dynamically resized too-->
<body onload="closeDropdownAtClickOutside();">
<!--*****************************************************************************
------------------------------Top Navigation Bar--------------------------
<!-******************************************************************************** -->
<!--Menu icon, Home page icon, Search and Page Relative menu, all in a static top bar always visible-->
<div class="topnav grid-container" id="myTopnav">
<!-- "Hamburger menu" / "Bar icon" to toggle the menu sidebar-->
<a class="item1" id="sideMenuBarOpenBtn" href="#" onclick="openMenuSideBar()">
<i class="fa fa-bars"></i>
</a>
<!--Home page link-->
<a class="item2" id="homePageBtn" href="homePage.php">
<i class="fa fa-home"></i>
</a>
<!--Add homepage search and menu on the right side of the topNav-->
<!--Search
See https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar3-->
<div class="item3 search-container">
<form class="search-container" action="livesearchview.php">
<input type="text" placeholder="Search..." name="search">
<button id="topBarSearchBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<!--Page Relative menu-->
<div class="item4 dropdown">
<button id="topNavRelativeMenuDropButton" class="dropbtn" onclick="showDropdownAtClick()">
<i class="fa fa-ellipsis-v"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Set moving date</a>
<a href="#">Set weight limit</a>
<a href="#">Set volume limit</a>
</div>
</div>
</div>
<!--*****************************************************************************
------------------------------Menu sidenav------------------------
-*****************************************************************************/
A responsive side menu bar-->
<div class="sidenav" id="myMenuSideBar">
<a id="sideMenuBarCloseBtn" href="javascript:void(0)" class="closebtn" onclick="closeMenuSideBar()">×</a>
<!-- - My name, my email and and text to (dis)connect. -
Improve this section so that behave like this :
At first the user is not connected, it displays :
"Welcome!
Connect"
Clicking on "connect" send the user to a sign in page.
When the user is connected, it displays :
"Samuel Roccoli
Disconnect"
Clicking on "connect" send the user to a sign in page.
-->
<div id="menuSideBarConnect">
Welcome!
<a href="#" class="icon">
Connect
</a>
</div>
<!--Link to the Home page-->
<a href="homePage.php" class="icon">
Home
</a>
<!--Link to the page "I prepare my move"-->
<a href="#" class="icon">
I prepare my move.
</a>
<!--Link to the page "I receive my items"-->
<a href="iReceiveMyItems.html" class="icon">
I receive my items.
</a>
<!--Link to the page "Objects List"-->
<a href="myObjectsList.html" class="icon">
Objects Lists
</a>
<!--Link to the page "Save"-->
<a href="save.html" class="icon">
Save
</a>
<!--Link to the page "Share"-->
<a href="share.html" class="icon">
Share
</a>
<!--Link to the page "Bin"-->
<a href="bin.html" class="icon">
Bin
</a>
</div>
</body>
<script src="myScript.js"></script>
</html>