Tutorial about: Vertical menu with CSS & HTML in ATOM (Open Source)
Video Language : Turkish Language
Githup link: ATOM
Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. ATOM OFFICIAL WEBSITE
What We Can Learn?
We going to learn create vertical menu,how add border , how to add soft in menu,how to add different color for everymenu and we learn add background color in this video tutorial.
We Learn About
- Add border
- Background color
- Change color wtih hovar codes
- Transition-duration
- Add every menu different color
- Text-decoration
- Padding-float
- List-style
Requirements
1- ATOM Program
2- Basic ATOM, usage information.
3- Basic CSS code knowledge.
4- Basic HTML code knowledge.
My Operating System
Difficulty
- Basic Level
Description
ATOM is free and open-source project. It has a github repo on github.com and github repository is here I describe the CSS and HTML in video.
We talked about how to add border , how to add soft view every menu, how to add every menu different color , change font background color, change color wtih hovar codes,transition.
Also with CSS and HTML codes we are continue a series
Video Tutorial - Turkish Language - 720p
Curriculum
ATOM OFFICIAL WEBSITE & GITHUB REPOSITORY
And More Details About Video
.menu {width:250px;}
.menu ul {list-style:none;}
.menu ul li a {background:#242221;
color:#fff;
font:14px verdana, arial;
display:block;
padding:20px 0px;
text-decoration:none;
text-align:center;}
#MainPage {border-left:3px solid #CF9E1E;}
#MainPage:hover {background:#CF9E1E;}
#about {border-left:3px solid #247C9E;}
#About:hover {background:#247C9E;}
#Exam {border-left:3px solid #4A9E50;}
#Exam:hover {background:#4A9E50;}
#Nots {border-left:3px solid #B114BA;}
#Nots:hover {background:#B114BA;}
#MainPage, #About, #Exam, #Nots {transition-duration:0.3s;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="yatay.css" type="text/css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#" id="MainPage">MainPage</a></li>
<li><a href="#" id="About">About</a></li>
<li><a href="#" id="Exam">Exam</a></li>
<li><a href="#" id="Nots">Nots</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</body>
</html>
Posted on Utopian.io - Rewarding Open Source Contributors