Vertical menu with ATOM | ( Turkish Video Tutorial)

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

https://utopian.io/utopian-io/@rdvn/creating-soft-transition-and-horizontal-menu-or-with-atom-turkish-video-tutorial

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>

Author : @rdvn

Posted on Utopian.io - Rewarding Open Source Contributors

Sort:

Trending

[-]

utopian-io (71) 8 years ago

Hey @rdvn I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.00