Transparent Menu Creation & use of Icons from awesome Font
14-05-2017    386 times
Transparent Menu CSS

Transparent Menu Creation Using CSS

We can create a menu which has no background color. But It gives an awesome outlook of the page. We can also attach some icons from fontawesome. io. we can change the size of the icon as we change the size of the text on webpages.

Html Code

<html>
<head>
<title>CSS NavBar</title>
<link rel="stylesheet" type"text/css" href="Navbar.css">
<link rel="stylesheet" type"text/css" href="css/font-awesome.css">

<div class="navBar">

Tutorial at home
<ul class="nav">
<li class="leftalign"><a href="#"><font size=7><i class="fa fa-heartbeat"></i></font></a></li>
<li class="rightalign"><a href="#">Articles</a></li>
<li class="rightalign"><a href="#">Notes</a></li>
<li class="rightalign"><a href="#">Info</a></li>
<li class="rightalign"><a href="#">Search</a></li>
<li class="rightalign"><a href="#"><i class="fa fa-home"></i>Home</a></li>
</ul>
</div>
</head>
<body>
<div class="container">
<input type="button" value="Enter" class="btn" />
</div>
</body>
</html>

Transparent Menu
Transparent Menu

Css Code

@charset "utf-8";

body
{
position:absolute;
background-image:url(img3.jpg);
width:100%;
}

.navBar
{
position:relative;
width:100%;
height:70px;
}
.nav
{
list-style:none;
}
.nav li
{
display:inline-block;
padding-left:15px;
padding-right:30px;
position:relative;
}

.nav li a
{
color:#ffffff;
font-weight:bold;
font-size:20px;
text-decoration:none;
}
.leftalign
{
float:left;
}
.rightalign
{
float:right;
}

Tutorial at home

.nav li a:hover
{
color:#ff9900;
}

.container
{
width:75%;
left:12.5%;
position:relative;
padding:25px;
padding-top:15%;
margin-top:30px;
}
.btn
{
width:20%;
left:40%;
padding:25px;
border-style:solid;
border-width:thick;
border-color:#ffffff;
background-color:#ff9900;
position:relative;
border-radius:15px;
color:#ffffff;
font-weight:bolder;
font-size:20px;
}
.btn:hover
{
color:#ff9900;
background-color:#ffffff;
}

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post