In today’s technology world, learning to write website code is very beneficial, especially if you are a business owner. Most automated web design programs and online editors will not give you too many options before you have to pay more money or before there, “are no more options”. Learning 3 basic code languages: html, css, and javascript in your spare time can give you the power to fully customize a website, wow your viewers, and yes, save you thousands of dollars. More good news is you only need a notepad program/app and an internet browser to perform this particular task.
One of the biggest misconceptions of website design is the process of how a website is actually made. Since we see a visual when viewing a site, most viewers believe that a website is assembled by clicking and pasting objects around on a canvas. Some editors do allow for this, but behind the scenes there are code languages working together to produce the visual in an internet browser. There are a lot of instances that automated editors have programming boundries or limits on what you are allowed to edit on a site. Further customizations will have to be integrated by editing the actual code that assembles the website.
In this sidepanel example, we are going to code and create a menu that opens on the side of a webpage when a hamburger icon is clicked, or touched. When the menu opens, there is a list for selections that appear. The hamburger icon transforms into a “X” and when clicked or touched will close the sidepanel and transform again back into the hamburger icon.
In this project, there are going to be three files created:
1.) index.html
2.) main.css
3.) main.js.
The html file gives structure. The css file gives style, and the javascript file makes it move. There are 2 link out tags in the html file that will link up the css and javascript files to the html file and allow all three files to work as a team so that you can view the finished result. In your folders or file manager, create a folder called “sidepanel”. In this folder, create the three files listed above. After you complete that, then you can enter the code below in each appropriate file by retyping it or copying and pasting. Then save each file.
The index.html file
Our html file will be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Example Slide Out Menu</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" onClick="myFunction(this), openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidepanel" class="sidepanel">
<br><hr />
<div><p><strong>MENU</strong></p></div><hr />
<a href="#top"> Top</a><hr />
<a href="index.html"> Home</a><hr />
<a href="#about"> About</a><hr />
<a href="#info"> Info</a><hr />
<a href="#services"> Services</a><hr />
<a href="#contact"> Contact</a><hr />
<div><p><strong>FEATURES</strong></p></div><hr />
</div>
<script src="js/main.js" ></script>
</body>
</html>This is all of the code needed in the html file. As indicated earlier, there are link outs to join the css and javascript files integrated in the html code. Next will be the css file. This is a different programming language that will issue our colors, shapes, font specifications and our overall design qualities.
The main.css file
The css file is as follows:
.container {
display: inline-block;
cursor: pointer;
}
/* This is for the animated icon:*/
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #FFB117;
margin: 6px 0;
position: relative;
left: 10px;
bottom: 10px;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
/* This is for the slide out menu:*/
.sidepanel {
height: 0; /* NOT HERE - Use javascript */
width: 0; /* NOT HERE - Use javascript */
position: fixed;
z-index: 1;
top: 70px;
left: 0px;
background-color: #FFB917;
overflow-x: scroll;
padding-top: 40px;
transition: 0.3s;
border-top: 8px;
border-left: 0;
border-bottom: 7px;
border-right: 0;
border-color: #808080;
border-style: inset;
}This is all of the code in the css file. The next code file is main.js. Javascript is a more advanced internet programming language, which will require more effort to learn and administer; However, in this particular example the code file is very small. The link out to join this file is in the html file as a tag.
The main.js file
The code is as follows:
function myFunction(x){
x.classList.toggle("change");
var x = document.getElementById("mySidepanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
// This is for the slide out menu and dimention:
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
document.getElementById("mySidepanel").style.height = "90%";
}Now that the 3 files are coded and saved, you can click and open the index.html file with your internet browser. [ Chrome, Opera, UC, Firefox, etc. ] Here you will see the slide out menu you have programmed instead of the code.
Most websites are programmed this same way. There are also other internet programming languages that are designed to perform similar or very different tasks, but this is the main concept of how you can customize your website for free, except for the time you use to learn the languages. Most pdf or digital books can be downloaded right to your phone so you can study in your own convienence. The digital books I listed below, may be found on multiple websites throughout the internet by searching the title indicated. In most cases these particular titles are free to download.
Here is a list of pdf or digital books you can obtain online.
- html xhtml the definitive guide,
- css the missing manual,
- wsu css cheatsheet,
- javascript the missing manual. CONCLUSION:
In this article you have learned basically, how a website can be assembled and how to code and create an example side panel menu that opens and closes by clicking or touching an icon. This project can be performed on a computer, tablet, or mobile phone by using a notepad, file manager, and internet browser program/app on your device. Any version.