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.

 

Advertisements

Use Dropbox to create public URL

Standard

Hey! Friends

Today i came up with a new trick which i learnt just few secs before and thought to share with you. Basically i learnt how to create a public URL via Dropbox , do you know what i mean exactly…?

O! let me make it simple  e.g suppose you have designed/developed a project few minutes before and now you want to share it across your friends/peers to get first hand feedback from them and you don’t have any hosting account but still you wanna to share your project link.

No worries Dropbox comes to your rescue and provide you free space, not only you can use Dropbox to create public URLs but you can use it as storage devicce as well. If you are team member of a big or small team who are working remotely and wanna to sync to each other, you can use Dropbox for the same.. My suggestion is to visit above mentioned Dropbox link to create you account and download/install the Dropbox software on your machines which you wanna to sync (means you can access same files on different desktop which are synced) to your Dropbox.

Ok, It is enough intro, now let us create a simple HTML page or visit any of your blog posts or any web page online and save that webpage to you desktop by going to FILE –>Save page As and set the destination as desktop(shortcut kep as Ctrl+S) or destination of your choice.

Now go to your desktop and you will find there webpage and folder(s) which contains its assets, copy them both and go to your PUBLIC FOLDER of Dropbox and put it there, allow the files to sync (Snyc is complete when you find little Green Tick sign on file icon)and then RIGHT CLICK on webpage and goto DROPBOX and then COPY PUBLIC LINK.

DropBox Image

Paste the link in browser and Voilaaa! here is your page. You can now share same link with your friends and other for FREE and get your project feedback.

Hope this is interesting for you…

Beware: Fake Google Job Resume Emails Contain Viruses

Standard

Hi Friends,

I received this email almost 5  times and every time i failed to understand why this so called Google Resume status email send from email id “resume-thanks@google.com” asks about the proper subject for resume submission mail as if Google is asking aspirants to submit their resume via email, which is not the case. Becoz Google Jobs portal is working same as other Job portals to submit their resume online.

This morning when i doubtly tried to search for Google Jobs email id if any and i got many posts already posted which mentions about the Email containing virus which mentions about failed resume submission to Google jobs. The text of email may vary from across the receivers. The text of that email which i received looks like this.

Thank you for your interest in Google job opportunities. Our system uses the email subject line to match

applications with current openings. Unfortunately, we were unable to determine a match for any of our

current openings based on your message.

If you are interested in a specific job, please resend your resume and include the job title in the

subject line of your email. This will help us get your resume to the right person more quickly.

Current openings can be viewed at: http://www.google.com/jobs. If you are interested in more than one

position, please send a separate email for each position.

Please do not respond to the from address of this email, as it won’t accept your resume.

Sincerely,

Google Staffing
http://www.google.com

 
So friends i thought to make u aware… and do share this with your friends… Thank you…

 

How to Send Text Messages with PHP

Standard

simplified diagram of how a message can be sent from a web application to a wireless device

Text messaging has become extremely widespread throughout the world — to the point where an increasing number of web applications have integrated SMS to notify users of events, sales or coupons directly through their mobile devices.

In this tutorial, Kevin Jensen will cover the fundamentals of sending text messages with PHP.

We’ll break this down — one piece at a time:

  • The message is composed using a web application that is stored and executed on a HTTP server and then sent through the internet (“the cloud”) as an email message.
  • The email is received by a Short Message Service Gateway (SMS Gateway), which converts the message from an email message to a SMS message.
  • The SMS message is then handed to a Short Message Service Center (SMSC), which is a server that routes data to specific mobile devices.
  • The message is finally transmitted over the wireless network to the recipient.

Most wireless networks have a SMS gateway through which email messages can be sent as text messages to a mobile device. This is nice, because, from a developer’s standpoint, it is generally free—however, it is of course not a free service for the end user. Fees still apply to the recipient of the message and messages sent via email will be billed as a non-network text message

Read this full post at Kevin Jensen

CSS3 Gradient Buttons

Standard

Button Image

 

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Do You wanna to know how to do this Click Here

Drag-and-Drop in Flex

Standard

Drag-and-drop lets you move components and transfer data in a Flex application via the mouse and ubiquitous “click-drag-drop” paradigm. All Flex components support drag-and-drop operations with the proper enablement.

We’re going to follow these steps to learn about Drag-and-Drop in Flex:

1. Create a Project and Application
2. Create some Boxes (one for dragging, one for dropping)
3. Make the Red Box Draggable
4. Make the Blue Box a Drop Target
5. Handle the Drop
6. Show Feedback
7. Use Drag Source

For complete tutorial please visit:

Drag N Drop

Flex Modules

Standard

Flex Modules are code functionality compiled to dynamically-loadable SWF files that can be loaded and unloaded by an application at run-time.

Modules let you split your application into several pieces, or modules. The main application, or loader, can dynamically load other modules that it requires, when it needs them. It does not have to load all modules when it starts, nor does it have to load any modules if the user does not interact with them.

For more info please read full post at:

Flex Modules