Discuss Scratch
- Outertoaster
- Scratcher
49 posts
Programming
hey, try this for a navigation bar:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: colour here;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: colour here;
}
.active {
background-color: colour here;
}
</style>
then add this:
<ul>
<li><a href=“#home”>Home</a></li>
<li><a href=“#pg2”>pg2</a></li>
<li><a href=“#nopage”>pg3</a></li>
<li style=“float:right”><a href=“#nopage”>pg4</a></li>
</ul>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: colour here;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: colour here;
}
.active {
background-color: colour here;
}
</style>
then add this:
<ul>
<li><a href=“#home”>Home</a></li>
<li><a href=“#pg2”>pg2</a></li>
<li><a href=“#nopage”>pg3</a></li>
<li style=“float:right”><a href=“#nopage”>pg4</a></li>
</ul>
Last edited by Outertoaster (March 23, 2017 22:17:08)
…“Have you mooed today?”…
- Outertoaster
- Scratcher
49 posts
Programming
you might want to add this though:
<font face=“calibri” color=“black”>
</font>
HTML COMPATIBLE FONT FACES
consolas
verdana
arial
arial rounded mt
Blackadder ITC
Bradley Hand ITC
comic sans ms
snap itc
stencil
script mt
webdings
Harlow Solid
Haettenschweiler
Showcard gothic
Calibri
(these are all i've tested so far)
<font face=“calibri” color=“black”>
</font>
HTML COMPATIBLE FONT FACES
consolas
verdana
arial
arial rounded mt
Blackadder ITC
Bradley Hand ITC
comic sans ms
snap itc
stencil
script mt
webdings
Harlow Solid
Haettenschweiler
Showcard gothic
Calibri
(these are all i've tested so far)
…“Have you mooed today?”…
- Sir_Awesome
- Scratcher
15 posts
Programming
This is another navigation bar, you could try it
<html>
<HEAD>
<style>
body {
background-color: #dddddd;
}
</style>
</HEAD>
<body bg-color=#dddddd>
<br>
<div align=“center” style=“”>
<h1>
<a href=“home” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
Home
</a>
<a href=“pg2” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg2
</a>
<a href=“nopage” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg3
</a>
<a href=“nopage” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg4
</a>
</h1>
</div>
</body>
</html>
<html>
<HEAD>
<style>
body {
background-color: #dddddd;
}
</style>
</HEAD>
<body bg-color=#dddddd>
<br>
<div align=“center” style=“”>
<h1>
<a href=“home” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
Home
</a>
<a href=“pg2” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg2
</a>
<a href=“nopage” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg3
</a>
<a href=“nopage” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
pg4
</a>
</h1>
</div>
</body>
</html>
check out my projects!
- Sir_Awesome
- Scratcher
15 posts
Programming
Thanks! use
[code=html]
[/code]
tags<like> <this>
check out my projects!
- Sir_Awesome
- Scratcher
15 posts
Programming
Also, this is another navigation bar I made, that is a bit better:
<html> <HEAD> <style> a.navigation { color: black; text-decoration: none; border: 1px solid black; background: #eee; border-radius: 10px; padding: 10px 10px; } span.padding {padding: 10px;} div.navigation { width: 510; border-radius: 20px; background: #ccc; border: 1px solid black; border-spacing: 10px; } </style> </HEAD> <body style="background-color:#aaa"> <div align="center"> <div align=“center” class="navigation"> <h1 align="center"> <a href="./home.html" class="navigation"> Home </a><span class="padding"></span> <a href="./pg2.html" class="navigation"> pg2 </a><span class="padding"></span> <a href="./pg3.html" class="navigation"> pg3 </a><span class="padding"></span> <a href="./pg4.html" class="navigation"> pg4 </a> </h1> </div> </div> </body> </html>
check out my projects!
- awesomekkgirl
- New to Scratch
1 post
Programming
so i always make anime.im up all night and all day finding out what all of you like.so far melanie is most popular in my investigation.
- Outertoaster
- Scratcher
49 posts
Programming
whats that supposed to mean? so i always make anime.im up all night and all day finding out what all of you like.so far melanie is most popular in my investigation.
…“Have you mooed today?”…
- StackMasher
- Scratcher
100+ posts
Programming
.data
message:
.ascii "I don't think designing a web document is programming\x0A\0"
.text
.globl main
.extern printf
main:
pushq %rbp
movq %rsp,%rbp
xorq %rax,%rax
leaq message,%rdi
callq printf
movq %rbp,%rsp
popq %rbp
movq $0,%rax
My latest project: https://github.com/RealPipeline/NewSuperTux
You should check out the makefile, I'm pretty proud of it since I don't consider myself a bash wizard and I struggled to make it compatible with infinitely deep subdirectories
Last edited by StackMasher (March 26, 2017 21:14:52)
- Outertoaster
- Scratcher
49 posts
Programming
CSS Fixed Full-height Side Nav:
Then add this….
Notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (e.g. if it has over 50 links inside of it).
This is optional:
Also optional:
<!--put this between the <head> tags--> <style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } </style>
<!--put this in the <body> tags--> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>
Notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (e.g. if it has over 50 links inside of it).
<div style="margin-left:25%;padding:1px 16px;height:1000px;"> </div> <!--This script will be needed to write on the page, or the sidenav will cover the text-->
This is optional:
<font face="consolas"> </font> <!--Put this as the first script, before the <ul> tags & after the 1st <body> tag-->
Also optional:
<!--Add this to the <head> tags--> <script> body { background-color: orange; padding: 30px } </script>
Last edited by Outertoaster (March 26, 2017 22:58:58)
…“Have you mooed today?”…
- Outertoaster
- Scratcher
49 posts
Programming
Custom link colours:
<style>
<!--unvisited link-->
a:link {
color: lime;
}
<!--visited link-->
a:visited {
color: hotpink;
}
<!--mouse over link-->
a:hover {
color: orange;
}
<!--selected link-->
a:active {
color: red;
}
</style>
Last edited by Outertoaster (March 26, 2017 22:36:04)
…“Have you mooed today?”…
- Outertoaster
- Scratcher
49 posts
Programming
This is another navigation bar, you could try it
<html>
<HEAD>
<style>
body {
background-color: #dddddd;
}
</style>
</HEAD>
<body bg-color=#dddddd>
<br>
<div align=“center” style=“”>
<h1>
<a href=“home” style=“color:black;text-decoration:none;border:1px solid red;background:#eeeeee”>
Home
</a> &nb…. and so on….
ive tested it out, its quite boring - your 2nd one is much better ☺
Last edited by Outertoaster (March 26, 2017 22:41:35)
…“Have you mooed today?”…
- bybb
- Scratcher
1000+ posts
Programming
I'm not an assembly wizard can you confirm my assumptions are correct?.data
message:
.ascii "I don't think designing a web document is programming\x0A\0"
.text
.globl main
.extern printf
main:
pushq %rbp
movq %rsp,%rbp
xorq %rax,%rax
leaq message,%rdi
callq printf
movq %rbp,%rsp
popq %rbp
movq $0,%rax
My latest project: https://github.com/RealPipeline/NewSuperTux
You should check out the makefile, I'm pretty proud of it since I don't consider myself a bash wizard and I struggled to make it compatible with infinitely deep subdirectories
pushq %rbp
movq %rsp, %rbp
xorq %rax, %rax
leaq message, %rdi
callq printf
movq %rbp, %rsp
popq %rbp
movq $0, %rax
And all this to print a string?
I prefer Windows' assembly method
format PE console ; PE Console application
entry start ; Entry point is start
include 'win32a.inc' ; Imports the win32a.inc include file for FASMW
section '.text' code executable ; Defines sections ".text" as code and executable
start: ; Point in the program
push hello ; Push "Hello world!%10%0"
call [printf] ; Calls printf
pop ecx ; Pop the ecx register
push 0 ; Push 0
call [ExitProcess] ; Exits program with return value 0
section '.rdata' data readable ; Defines section ".rdata" as data and readable
hello db 'Hello world!', 10, 0 ; Defines the bytes "Hello world!%10%0"
section '.idata' data readable import ; Defines section ".idata" as data, readable and as imports
library kernel32, 'kernel32.dll', \
msvcrt, 'msvcrt.dll' \
; Defines the library kernel32.dll as kernel32
; Defines the library msvcrt.dll as msvcrt
import kernel32, ExitProcess, 'ExitProcess' ; Imports ExitProcess
import msvcrt, printf, 'printf' ; Imports printf
Last edited by bybb (March 27, 2017 07:55:15)
- StackMasher
- Scratcher
100+ posts
Programming
Yup. The “xorq %rax, %rax” line clears the %rax register to 0 as required by the ABI:I'm not an assembly wizard can you confirm my assumptions are correct?.data
message:
.ascii "I don't think designing a web document is programming\x0A\0"
.text
.globl main
.extern printf
main:
pushq %rbp
movq %rsp,%rbp
xorq %rax,%rax
leaq message,%rdi
callq printf
movq %rbp,%rsp
popq %rbp
movq $0,%rax
My latest project: https://github.com/RealPipeline/NewSuperTux
You should check out the makefile, I'm pretty proud of it since I don't consider myself a bash wizard and I struggled to make it compatible with infinitely deep subdirectoriesPushes rbp to the stackpushq %rbpMoves rsp into rbpmovq %rsp, %rbpxor is normally used for error checking and clearing registers right?xorq %rax, %raxThis puts the pointer (like a const char*) into %rdi right?leaq message, %rdiCalls printf . I assume it reads the rdi registercallq printfMoves moves rbp into rspmovq %rbp, %rspPops rbp off of the stackpopq %rbpMeans return 0 right?movq $0, %rax
And all this to print a string?
I prefer Windows' assembly method
If the callee is a variadic function, then the number of floating point arguments passed to the function in vector registers must be provided by the caller in the RAX register.
Looks harder to readformat PE console ; PE Console application
entry start ; Entry point is start
include 'win32a.inc' ; Imports the win32a.inc include file for FASMW
section '.text' code executable ; Defines sections ".text" as code and executable
start: ; Point in the program
push hello ; Push "Hello world!%10%0"
call [printf] ; Calls printf
pop ecx ; Pop the ecx register
push 0 ; Push 0
call [ExitProcess] ; Exits program with return value 0
section '.rdata' data readable ; Defines section ".rdata" as data and readable
hello db 'Hello world!', 10, 0 ; Defines the bytes "Hello world!%10%0"
section '.idata' data readable import ; Defines section ".idata" as data, readable and as imports
library kernel32, 'kernel32.dll', \
msvcrt, 'msvcrt.dll' \
; Defines the library kernel32.dll as kernel32
; Defines the library msvcrt.dll as msvcrt
import kernel32, ExitProcess, 'ExitProcess' ; Imports ExitProcess
import msvcrt, printf, 'printf' ; Imports printf
In GAS syntax things like entrypoints (“entry start”) or section declarations would generally be put seperately in a linker script
Last edited by StackMasher (March 27, 2017 15:28:39)
- Sir_Awesome
- Scratcher
15 posts
Programming
CSS Fixed Full-height Side Nav:Then add this….<!--put this between the <head> tags--> <style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } </style><!--put this in the <body> tags--> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>
Notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (e.g. if it has over 50 links inside of it).<div style="margin-left:25%;padding:1px 16px;height:1000px;"> </div> <!--This script will be needed to write on the page, or the sidenav will cover the text-->
This is optional:<font face="consolas"> </font> <!--Put this as the first script, before the <ul> tags & after the 1st <body> tag-->
Also optional:<!--Add this to the <head> tags--> <script> body { background-color: orange; padding: 30px } </script>
I really like this navigation bar, but it would be probably be better if you were to use classes, e.g.
ul.navigation {stuff}
ul {stuff}
check out my projects!
- Sir_Awesome
- Scratcher
15 posts
Programming
I edited the navigation thing @Outertoaster made, and this is what I made (I didn't edit the navigation bar). What I added was a thing so that the button's were coloured in, and so that when you clicked a button, it would change the screen to a different html thing, described in the <script> tags.
This is @Outertoaster's navigation bar css
and here's the javascript I added:
This is @Outertoaster's navigation bar css
<style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } </style>
and here's the javascript I added:
<body> <ul> <li><a href="#Home" id="Home" onclick="update('Home')">Home</a></li> <li><a href="#News" id="News" onclick="update('News')">News</a></li> <li><a href="#Contact" id="Contact" onclick="update('Contact')">Contact</a></li> <li><a href="#About" id="About" onclick="update('About')">About</a></li> </ul> <div style="margin-left:25%;padding:1px 16px;"> <div id="main">blank</div> <script> update(); function update(page) { var pages = ["Home", "News", "Contact", "About"] var pages_html = {"Home": "<h1>Home</h1>", "News": "<h1>News</h1>", "Contact": "<h1>Contacts</h1>", "About": "<h1>About</h1>"} for (var i = 0; i < pages.length; i++) { document.getElementById(pages[i]).className = ""; } if (!page) { var url = window.location.href; url = url.split("#")[1]; if (url == null) { document.getElementById("main").innerHTML = pages_html["Home"] } else { document.getElementById(url.split(",")[0]).className = "active"; document.getElementById("main").innerHTML = pages_html[url.split(",")[0]]; } } else { document.getElementById(page).className = "active"; document.getElementById("main").innerHTML = pages_html[page]; } } </script> </div> </body>
check out my projects!
- Outertoaster
- Scratcher
49 posts
Programming
I edited the navigation thing @Outertoaster made, and this is what I made (I didn't edit the navigation bar). What I added was a thing so that the button's were coloured in, and so that when you clicked a button, it would change the screen to a different html thing, described in the <script> tags.
This is @Outertoaster's navigation bar css<style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } </style>
and here's the javascript I added:<body> <ul> <li><a href="#Home" id="Home" onclick="update('Home')">Home</a></li> <li><a href="#News" id="News" onclick="update('News')">News</a></li> <li><a href="#Contact" id="Contact" onclick="update('Contact')">Contact</a></li> <li><a href="#About" id="About" onclick="update('About')">About</a></li> </ul> <div style="margin-left:25%;padding:1px 16px;"> <div id="main">blank</div> <script> update(); function update(page) { var pages = ["Home", "News", "Contact", "About"] var pages_html = {"Home": "<h1>Home</h1>", "News": "<h1>News</h1>", "Contact": "<h1>Contacts</h1>", "About": "<h1>About</h1>"} for (var i = 0; i < pages.length; i++) { document.getElementById(pages[i]).className = ""; } if (!page) { var url = window.location.href; url = url.split("#")[1]; if (url == null) { document.getElementById("main").innerHTML = pages_html["Home"] } else { document.getElementById(url.split(",")[0]).className = "active"; document.getElementById("main").innerHTML = pages_html[url.split(",")[0]]; } } else { document.getElementById(page).className = "active"; document.getElementById("main").innerHTML = pages_html[page]; } } </script> </div> </body>
I like it!(except for the font XD)
…“Have you mooed today?”…
- Sir_Awesome
- Scratcher
15 posts
Programming
I made the navigation bar have a show/hide button and added it an animation, maybe you could make a nicer svg image for the show/hide button?
<style> body { margin: 0; } ul.navigation { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } div.hide { position: fixed; top: calc(50% - 40px); left: 25%; padding: 0; height: 80px; width: 20px; margin: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } </style> <body onchange="" onload="update()"> <ul class="navigation" onchange="" id="ul" title="navigation bar"> <li><a title="link to home" href="#Home" id="Home" onclick="update('Home')">Home</a></li> <li><a title="link to news" href="#News" id="News" onclick="update('News')">News</a></li> <li><a title="link to contact" href="#Contact" id="Contact" onclick="update('Contact')">Contact</a></li> <li><a title="link to about" href="#About" id="About" onclick="update('About')">About</a></li> </ul> <div> <div style="margin-left:25%;padding:1px 16px;" id="main"><h1>Home</h1></div> <div class="hide"id="hide" onclick="hide()" title="hide the navigation bar"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="80px" viewBox="0 0 30 80" enable-background="new 0 65.326 612 502.174" xml:space="preserve"><path fill="lightgray" d="M 0 0 L 30 10 L 30 70 L 0 80 z"/> <path fill="gray" stroke="none" d ="M 0 10 L 20 16 L 20 64 L 0 70 z"> </svg> </div> <script> var shown = true; function hide() { var width = screen.availWidth * -0.25; if (shown) { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; shown = false; document.getElementById("hide").title= "show the navigation bar"; } else { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; shown = true; document.getElementById("hide").title= "hide the navigation bar"; } } function update(page) { var pages = ["Home", "News", "Contact", "About"] var pages_html = {"Home": "<h1>Home</h1>", "News": "<h1>News</h1>", "Contact": "<h1>Contacts</h1>", "About": "<h1>About</h1>"} for (var i = 0; i < pages.length; i++) { document.getElementById(pages[i]).className = ""; } if (!page) { var url = window.location.href; url = url.split("#")[1]; console.log(url); if (url == undefined || url == null) { document.getElementById("main").innerHTML = pages_html["Home"] document.getElementById("Home").className = "active"; } else { document.getElementById(url.split(",")[0]).className = "active"; document.getElementById("main").innerHTML = pages_html[url.split(",")[0]]; } } else { document.getElementById(page).className = "active"; document.getElementById("main").innerHTML = pages_html[page]; } } update(); </script> </div> </body>
check out my projects!
- Outertoaster
- Scratcher
49 posts
Programming
looks good! I made the navigation bar have a show/hide button and added it an animation, maybe you could make a nicer svg image for the show/hide button?<style> body { margin: 0; } ul.navigation { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } div.hide { position: fixed; top: calc(50% - 40px); left: 25%; padding: 0; height: 80px; width: 20px; margin: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } </style> <body onchange="" onload="update()"> <ul class="navigation" onchange="" id="ul" title="navigation bar"> <li><a title="link to home" href="#Home" id="Home" onclick="update('Home')">Home</a></li> <li><a title="link to news" href="#News" id="News" onclick="update('News')">News</a></li> <li><a title="link to contact" href="#Contact" id="Contact" onclick="update('Contact')">Contact</a></li> <li><a title="link to about" href="#About" id="About" onclick="update('About')">About</a></li> </ul> <div> <div style="margin-left:25%;padding:1px 16px;" id="main"><h1>Home</h1></div> <div class="hide"id="hide" onclick="hide()" title="hide the navigation bar"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="80px" viewBox="0 0 30 80" enable-background="new 0 65.326 612 502.174" xml:space="preserve"><path fill="lightgray" d="M 0 0 L 30 10 L 30 70 L 0 80 z"/> <path fill="gray" stroke="none" d ="M 0 10 L 20 16 L 20 64 L 0 70 z"> </svg> </div> <script> var shown = true; function hide() { var width = screen.availWidth * -0.25; if (shown) { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; shown = false; document.getElementById("hide").title= "show the navigation bar"; } else { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; shown = true; document.getElementById("hide").title= "hide the navigation bar"; } } function update(page) { var pages = ["Home", "News", "Contact", "About"] var pages_html = {"Home": "<h1>Home</h1>", "News": "<h1>News</h1>", "Contact": "<h1>Contacts</h1>", "About": "<h1>About</h1>"} for (var i = 0; i < pages.length; i++) { document.getElementById(pages[i]).className = ""; } if (!page) { var url = window.location.href; url = url.split("#")[1]; console.log(url); if (url == undefined || url == null) { document.getElementById("main").innerHTML = pages_html["Home"] document.getElementById("Home").className = "active"; } else { document.getElementById(url.split(",")[0]).className = "active"; document.getElementById("main").innerHTML = pages_html[url.split(",")[0]]; } } else { document.getElementById(page).className = "active"; document.getElementById("main").innerHTML = pages_html[page]; } } update(); </script> </div> </body>
…“Have you mooed today?”…
- Outertoaster
- Scratcher
49 posts
Programming
I made the navigation bar have a show/hide button and added it an animation, maybe you could make a nicer svg image for the show/hide button?<head> <link href='https://fonts.googleapis.com/css?family=Press Start 2P' rel='stylesheet'> <style> body { margin: 0; font-family: 'press start 2p': } ul.navigation { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: lightgray; color: white; } div.hide { position: fixed; top: calc(50% - 40px); left: 25%; padding: 0; height: 80px; width: 20px; margin: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } </style> </head> <body onchange="" onload="update()"> <ul class="navigation" onchange="" id="ul" title="navigation bar"> <li><a title="link to home" href="#Home" id="Home" onclick="update('Home')">Home</a></li> <li><a title="link to news" href="#News" id="News" onclick="update('News')">News</a></li> <li><a title="link to contact" href="#Contact" id="Contact" onclick="update('Contact')">Contact</a></li> <li><a title="link to about" href="#About" id="About" onclick="update('About')">About</a></li> </ul> <div> <div style="margin-left:25%;padding:1px 16px;" id="main"><h1>Home</h1></div> <div class="hide"id="hide" onclick="hide()" title="hide the navigation bar"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="80px" viewBox="0 0 30 80" enable-background="new 0 65.326 612 502.174" xml:space="preserve"><path fill="lightgray" d="M 0 0 L 30 10 L 30 70 L 0 80 z"/> <path fill="gray" stroke="none" d ="M 0 10 L 20 16 L 20 64 L 0 70 z"> </svg> </div> <script> var shown = true; function hide() { var width = screen.availWidth * -0.25; if (shown) { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;-webkit-transform: translate(" + width + "px,0);-moz-transform: translate(" + width + "px,0);-o-transform: translate(" + width + "px,0);-ms-transform: translate(" + width + "px,0);transform: translate(" + + "px,0);"; shown = false; document.getElementById("hide").title= "show the navigation bar"; } else { document.getElementById("ul").style = "list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("hide").style = "position: fixed;top: calc(50% - 40px);left: 25%;padding: 0;height: 0px;width: 0px;margin: 0;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; document.getElementById("main").style = "margin-left:25%;padding:1px 16px;margin-left:25%;padding:1px 16px;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;"; shown = true; document.getElementById("hide").title= "hide the navigation bar"; } } function update(page) { var pages = ["Home", "News", "Contact", "About"] var pages_html = {"Home": "<h1>Home</h1>", "News": "<h1>News</h1>", "Contact": "<h1>Contacts</h1>", "About": "<h1>About</h1>"} for (var i = 0; i < pages.length; i++) { document.getElementById(pages[i]).className = ""; } if (!page) { var url = window.location.href; url = url.split("#")[1]; console.log(url); if (url == undefined || url == null) { document.getElementById("main").innerHTML = pages_html["Home"] document.getElementById("Home").className = "active"; } else { document.getElementById(url.split(",")[0]).className = "active"; document.getElementById("main").innerHTML = pages_html[url.split(",")[0]]; } } else { document.getElementById(page).className = "active"; document.getElementById("main").innerHTML = pages_html[page]; } } update(); </script> </div> </body>Added New font
Last edited by Outertoaster (Aug. 7, 2017 21:35:05)
…“Have you mooed today?”…