HTML5 Tags

Standard

Asalamu Alaikum Friends!

Today i am going to talk about HTML5 tags, YES! not all but few which really interests me lot or those tags which if done in simple CSS2 will really take out lots of sweat.

As per the w3schools.com, they give the brief introduction of HTML5 like this:

and if we dig deep we see the browser compatibility like this:

HTML5 Browser Compatibility

It is really awesome, but yeh! compatibility is the issue which some times really frustrates, but don’t worry almost all the browers are updating and soon you will see a great support of HTML5 across the browsers and one more thing IE10 is coming soon and as per the news Microsoft says it will surprise all. Now let us wait for the original release and till then you can test drive it.

OK, I think it is enough intro let me show you the tags which really interests me.

<details></details> & <summary>,/summary> tags. [currently support in Chrome only]

Let me write a small snippet of it and show you how it Looks:

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

and some support css code (Please note it is not part of the above tags, it is just for over all look and feel)


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and complete CSS code


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and now let me show you how its HTML code looks like:

<details>
<summary>Shabir Gilkar</summary>
<h1>About Me!</h1>
<p>I am Shabir Gilkar from Srinagar Kashmir, now shifted to Bangalore India.</p>
</details>
    <details>
<summary>What i do?</summary>
<h1>I m doing</h1>
<p>I am working as Sr. Graphics Designer in Aditi Technologies Bangalore, You can reach me at shabirgilkar@gmail.com</p>
</details>

and it display like this, It is almost like accordion.

and next tag about which i would like to discuss is <mark></mark> tag. It is used to highlight any section in sentence.
To make it little interesting i had wrote little css to it. It had support in almost all the latest browsers

mark
{
    padding: 2px;
    border: 1px dotted orange;
}

and the HTML code for this:

Do not forget to get <mark>Milk</mark> from market...!!

and when we display the same in browser it looks like this:

I hope you  all like the above discussed tags and i am looking forward to update this post as i pass through while learning it. Please post your comments/suggestion, and i will be more than happy to receive them. Thanks in advance!

 

CSS only Dropdown menu

Standard

Hi Friends!

Today i am gonna to talk about how to create CSS ONLY DROPDOWN MENU for our web project. I know you had been though lots of dropdown menus, but many use CSS/Javascript/JQuery dropdown menus. But what today i am gonna to show you how to create pure css dropdown menu.

Below given is the screen shot which we will get after writing down CSS and HTML code about which i am going to discuss later.

CSS only Dropdown menu

Let me first show you the CSS code i had created for above dropdown menu:


/*------ Main Nav starts -------*/

 .mainNav
{
    height: 40px;
    border: solid 1px #a6a6a6;
	background: #a6a6a6;
	background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#f7f7f7));
	background: -moz-linear-gradient(top,  #d3d3d3,  #f7f7f7);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#f7f7f7');
    margin: 40px 15px;
}

.mainNav ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.mainNav ul li
{
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.mainNav ul li.nav
{
    font-family: SegoeUI;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height:40px;
    padding: 0 20px;
    border-right:1px solid #d3d3d3;
}

.mainNav ul li.nav:hover
{
    background: rgba(8,102,198,0.8);
    border-right:1px solid rgba(6,80,155,1);
    cursor:pointer;
    color:#fff !Important;
}

.mainNav ul li.nav span
{
    cursor:pointer;
}

.mainNav ul li.nav .dropdown
{
    display:none;
}

.mainNav ul li.nav:hover .dropdown,
.mainNav ul li.nav:hover .dropdown:focus
{
    position:absolute;
    display: block;
    background: rgba(8,102,198,0.8);
    height:auto;
    max-width:150px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    margin:0 0 0 -20px;

}

.mainNav ul li.nav:hover .dropdown ul
{
    list-style: none;
    padding: 0px;
    margin:0;
    overflow:hidden;
}

.mainNav ul li.nav:hover .dropdown ul li
{
    width:100%;
    padding:0px;
    margin: 0px;
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav
{
    display:inline-block;
    min-width:100%;
    font-family: SegoeUI;
    color: #fff;
    font-size: 12px;
    padding:0 0 0 25px;
    line-height:30px;
    text-transform:none;
    border-bottom:1px dotted rgba(68,208,254,0.8);
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav:hover
{
    background-color: rgba(6,80,155, 0.4);
}

/*------- Menu icons starts-----------*/

li.file
{
    background:url(../Images/Icons/1.png) no-repeat 4px center;
}

li.chart
{
    background:url(../Images/Icons/11.png) no-repeat 4px center;
}

li.home
{
    background:url(../Images/Icons/17.png) no-repeat 4px center;
}

li.meeting
{
    background:url(../Images/Icons/18.png) no-repeat 4px center;
}

li.stickynote
{
    background:url(../Images/Icons/26.png) no-repeat 4px center;
}

li.save
{
    background:url(../Images/Icons/22.png) no-repeat 4px center;
}

li.briefcase
{
    background:url(../Images/Icons/27.png) no-repeat 4px center;
}

li.print
{
    background:url(../Images/Icons/16.png) no-repeat 4px center;
}

/*------- Menu icons ends-----------*/

/*------ Main Nav Ends -------*/

and now let me show you the HTML code for dropdown menu:

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>:: Multi level DD menu ::</title>
 <link href="CSS/Menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="mainWrapper">
 <div class="mainNav boxShadow borderRadius">
 <ul>
 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Home</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">About Us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">products</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">services</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">FAQ's</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Careers</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New Jobs</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Company Tour</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Why to join us</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Submit resume</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Contact us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">Location</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Office Address</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Enquiry</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>
<pre>

Create a HTML page say index.html with in any editor of your choice and paste the HTML code with in it. Now copy the CSS code and create new css file namely “Menu” and put it is CSS folder of the project.

Note i have used some dummy icon images you can use your own and name them as per your needs and put them within the image folder. The Icon image size is 16×16. I had used the icons from site . I hope you will like this and i am eagerly waiting for your comments/suggestions and i would like to mention that all are free to use this code in their projects and update the same.