Programming

Outertoaster

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>

Last edited by Outertoaster (March 23, 2017 22:17:08)

…“Have you mooed today?”…

Outertoaster

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)

…“Have you mooed today?”…

Sir_Awesome

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>

check out my projects!

-stache-

use
[code=html]
[/code]
tags

<like> <this>

3x3 pb: 13.240
3x3 avg: ~21-26

Sir_Awesome

-stache- wrote:
use
[code=html]
[/code]
tags
<like> <this>

Thanks!

check out my projects!

Sir_Awesome

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

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

awesomekkgirl wrote:
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.

whats that supposed to mean?

…“Have you mooed today?”…

StackMasher

.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

CSS Fixed Full-height Side Nav:

<!--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>

Then add this….

<!--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

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

Sir_Awesome wrote:
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

StackMasher wrote:

.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

I'm not an assembly wizard can you confirm my assumptions are correct?

pushq %rbp

Pushes rbp to the stack

movq %rsp,  %rbp

Moves rsp into rbp

xorq  %rax, %rax

xor is normally used for error checking and clearing registers right?

leaq  message,  %rdi

This puts the pointer (like a const char*) into %rdi right?

callq printf

Calls printf . I assume it reads the rdi register

movq %rbp,  %rsp

Moves moves rbp into rsp

popq %rbp

Pops rbp off of the stack

movq  $0, %rax

Means return 0 right?

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)

Game Over
You'll find me on @LastContinue from now on.

StackMasher

bybb wrote:
StackMasher wrote:
.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
I'm not an assembly wizard can you confirm my assumptions are correct?
pushq %rbp
Pushes rbp to the stack
movq %rsp,  %rbp
Moves rsp into rbp
xorq  %rax, %rax
xor is normally used for error checking and clearing registers right?
leaq  message,  %rdi
This puts the pointer (like a const char*) into %rdi right?
callq printf
Calls printf . I assume it reads the rdi register
movq %rbp,  %rsp
Moves moves rbp into rsp
popq %rbp
Pops rbp off of the stack
movq  $0, %rax
Means return 0 right?

And all this to print a string?
I prefer Windows' assembly method

Yup. The “xorq %rax, %rax” line clears the %rax register to 0 as required by the ABI:

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.

bybb wrote:

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

Looks harder to read
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

Outertoaster wrote:

CSS Fixed Full-height Side Nav:

<!--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>

Then add this….

<!--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}

as opposed to

ul {stuff}

check out my projects!

Sir_Awesome

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>

check out my projects!

Outertoaster

Sir_Awesome wrote:

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

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

Sir_Awesome wrote:

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>

looks good!

…“Have you mooed today?”…

Outertoaster

Outertoaster wrote:

Sir_Awesome wrote:

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?”…

Discuss Scratch

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

About

Community

Resources

Legal

Scratch Family

Discuss Scratch

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

Programming

About

Community

Resources

Legal

Scratch Family

Sign in