diff --git a/Kazoo b/Kazoo new file mode 100644 index 0000000..60b53ea --- /dev/null +++ b/Kazoo @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + +
+

Kazzoo, the Open Trade Portal +
+ +
+

+

What is possible in Kazzoo???

+

Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.

+

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).

+ +
+ + + diff --git a/mystyle.css b/mystyle.css new file mode 100644 index 0000000..aa33375 --- /dev/null +++ b/mystyle.css @@ -0,0 +1,65 @@ +background: url(background.jpg) no-repeat center fixed; + background-size: cover; + +ul { + border: 1px solid #555; +} + +li { + text-align: center; + border-bottom: 1px solid #555; +} + +li:last-child { + border-bottom: none; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + width: 25%; + background-color: #f1f1f1; + height: 100%; /* Full height */ + position: fixed; /* Make it stick, even on scroll */ + overflow: auto; /* Enable scrolling if the sidenav has too much content */ +} +li a { + display: block; + color: #000; + padding: 8px 16px; + text-decoration: none; +} + +li a.active { + background-color: #4CAF50; + color: white; +} + +li a:hover:not(.active) { + background-color: #555; + color: white; +} +
+ + + + + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 12px 16px; +} + +.dropdown:hover .dropdown-content { + display: block; +}