css menu Archives - https://mitindia.in/tag/css-menu/ Fri, 06 Jan 2023 08:53:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png css menu Archives - https://mitindia.in/tag/css-menu/ 32 32 Sliding menu in html css https://mitindia.in/sliding-menu-html-css/ Mon, 23 Jan 2017 10:41:58 +0000 http://www.mitindia.in/?p=735 Slider menu in html page using css To create a slider navigation menu in html by using CSS syntax. Copy the following program and paste in Notepad then save as .html file extension and view in browser. <html> <style> body { font-family: "Tahoma", sans-serif; } .sidemenu { height: 100%; width: 0; position: fixed; top: 0; […]

The post Sliding menu in html css appeared first on .

]]> Slider menu in html page using css

To create a slider navigation menu in html by using CSS syntax.

Copy the following program and paste in Notepad then save as .html file extension and view in browser.

<html>
<style>
body 
{
 font-family: "Tahoma", sans-serif;
}

.sidemenu {
 height: 100%;
 width: 0;
 position: fixed;
 top: 0;
 right: 0;
 background-color: #222;
 overflow-x: hidden;
 transition: 1s;
 padding-top: 50px;
}

.sidemenu a {
 padding: 9px 9px 9px 42px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s
}

.sidemenu a:hover, .offcanvas a:focus{
 color: #f1f1f1;
}

.sidemenu .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
}
</style>
<body>

<div id="mySidenav" class="sidemenu">
 <a href="javascript:void(0)" class="closebtn" 
onclick="closeNav()">&times;</a>
 <a href="#">Web design</a>
 <a href="#">Digital Marketing</a>
 <a href="#">Mobile App</a>
 <a href="#">Contact</a>
<img src="d:\web-design.jpg" height=100 width=100>
<img src="d:\bing.jpg" height=100 width=100>
<img src="d:\ubuntu.png" height=100 width=100>
<img src="d:\java-logo.jpg" height=100 width=100>
</div>
<div align=right>
<h2 align=right>Animated SideMenu Demo</h2>
<span style="font-size:30px;cursor:pointer" 
onclick="openNav()">&#9776; Menu</span>
<script>
function openNav() {
 document.getElementById("mySidenav").style.width = 
"300px";
}

function closeNav() {
 document.getElementById("mySidenav").style.width = 
"0";
}

</script>
</body>
</html>

Output 

Before opening Menu

After opening Menu

Navigation bar with header logo

Share

The post Sliding menu in html css appeared first on .

]]> CSS blocks-and-menus https://mitindia.in/css-blocks-and-menus/ Wed, 22 Jun 2016 10:37:06 +0000 http://www.mitindia.in/?p=140 In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site. Below are the some of examples you can refer . Creating beautiful hyperlink buttons with CSS blocks. Example 1. <html> <head> <style> #corner1{ border-radius: 15px 50px 30px 5px; background: skyblue; padding: 20px; width: 100px; height: 25px; } #corner2{ […]

The post CSS blocks-and-menus appeared first on .

]]> In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site.
Below are the some of examples you can refer .
Creating beautiful hyperlink buttons with CSS blocks.
Example 1.

<html>
<head>
<style> 
#corner1{
  border-radius: 15px 50px 30px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 15px 50px 30px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 15px 50px 30px 5px;
   background: red;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 50px 30px 5px;
   background: cyan;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}
</style>
</head>
<body>
<p id="corner1"> About us </p>
<p id="corner2"> Contact us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> siteMap </p>
</body>
</html>

output of the above code is:

Example 2.

<html>
<head>
<style> 
#corner1{
  border-radius: 20px 20px 0px 0px;
   background: khaki;
   padding: 20px; 
   width: 950px;
   height: 25px; 
background-image: url("ubuntu.png");
}

#corner2{
  border-radius: 15px 15px 15px 15px;
   background: skyblue;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner3{
   border-radius: 15px 15px 15px 15px;
   background: green;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 15px 15px 15px;
   background: magenta;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   background: red;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-image: url("solid.jpg");
background-color: blue;
}
</style>
</head>
<body>
<p id="corner1"><marquee> Hello world </marquee> </p>
<p id="corner2"> Hello world </p>
<p id="corner3"> Hello world </p>
<p id="corner4"> Hello world </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
<img src="d:\web-design.jpg" id="corner5">
<h3 id="corner4"> Welcome </h3>
</body>
</html>

output:

Example 3.

<html>
<head>
<style> 
#corner1{
  border-radius: 35px 15px 50px 5px;
   background: khaki;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 35px 15px 50px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<p id="corner1">Home </p>
<p id="corner2"> About us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> Contact us </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
</body>
</html>

Output:

Example 4.

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ff0000;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
</style>
</head>
<body>
<h1> CSS Blocks </h1>
<div class="img">
 <a target="f3" href="wp2.html"><img src="ubuntu.png" width="110" height="90"></a>
 <div class="desc">Ubuntu, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp3.html"><img src="solid.jpg" alt="Solid" width="110" height="90"></a>
 <div class="desc">Solid, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp4.html"><img src="java-logo.jpg" alt="java" width="110" height="90"></a>
 <div class="desc">Java,  a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp5.html"><img src="web-design.jpg" alt="web" width="110" height="90"></a>
 <div class="desc">web, a description of the image here</div>
</div>

</body>
</html>

output:

Example 5. Table with CSS properties.

<html>
<head>
<style>
table, td, th {
    border: 5px solid blue;
color:black;
}

th {
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>Ramu</td>
    <td>Gopi</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Suman</td>
    <td>Rastogi</td>
    <td>Indore</td>
  </tr>
  <tr>
    <td>Kevin</td>
    <td>Saman</td>
    <td>Delhi</td>
  </tr>
</table>
</body>
</html>

output:

Example 6 (create shivling using css blocks!)
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;font-family: tahoma; font-size:18pt; background-image:linear-gradient(to bottom, orange,skyblue,white); width:250px; height:30px; border-radius:0px 30px 0px 30px; text-shadow:black 2px 2px;}

#br{background-color:black; width:50px; height:150px; border-radius:30px; padding: 10px; color: white;}
#vs{background-color:black; width:250px; height:30px; border-radius:30px;}
#sh{background-color:black; width:250px; height:30px; border-radius:30px; }

body{background-image:linear-gradient(to bottom, skyblue, white); background-repeat: no-repeat;}

</style>
</head>
<body>
<center>
<h1>Om Namaha Shivay </h1>
<p id="br">=== </p>
<p id="vs"> </p>
<p id="sh"> </p>
</body>
</html>

and the Output is as following!

 

Share

The post CSS blocks-and-menus appeared first on .

]]>