Show-Hide Submenu using CSS and HTML Only

It is common for websites to have submenus under menus.

A common behavior for submenus is that it shall only be visible when the main menu is hovered.

Below are simple code snippets of doing this with HTML and CSS only (no Javascript).

First we'll have the HTML structure.

<ul class="menu">
 <li><a href="">Menu</a></li>
 <li><a href="">A very long Menu</a>  
  <ul class="submenu">
   <li><a href="">Menu</a></li>
   <li><a href="">Menu</a></li>
  </ul>
 </li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a>
  <ul class="submenu">
   <li><a href="">A long submenu</a></li>
   <li><a href="">Menu</a></li>
  </ul>
 </li>
 <li><a href="">Menu</a></li>
 <li><a href="">Menu</a></li>
</ul>

We'll include some default styling.

*{padding:0;margin:0;}
body{font:16px Tahoma;padding:10px;}
a{text-decoration:none;}
ul{list-style-type:none;}

So far, our menu would look like this:

Let's add style to our main menu.

.menu{
 position:relative;
}
.menu li{
 float:left;
}
.menu>li>a{
 background:red;
 padding:15px;
 display:block;
 border:1px solid black;
}
.menu>li>a:hover{
 background:orange;
}

We can now distinguish the main and the submenu.

Please do not mind the arrow left on the lower right. That's from a plugin on my browser.

Let us now style the submenu.

.submenu li{
 clear:left;
}
.submenu>li>a{
 background:yellow;
 padding:10px;
 display:block;
 border:1px solid black;
}

Notice that the fifth menu's width is increased because of its submenu. Let's make our submenu absolute so it will not affect the main menu.

.submenu{
 position:absolute;
}

We've already fixed the width for the main menu.
But the submenu seems a little awkward.
This is when we give a fixed width for the submenu so that everything will have the same width.

Add width:120px to .submenu>li>a.

Looking nice so far.
But we need to hide the submenu.
So let's add display:none; to our .submenu class.

Our submenu is now hidden from view.
But this should appear when we hover on its main menu.
So we add the following rule:

.menu>li:hover>.submenu{
 display:block;
}

Tadaan!

Sample Result

We have created a menu with submenu using only HTML and CSS.

Any better ideas? Please leave a message on the comments section.

Read more ...

CSS & JavaScript: Modal Dialog

Hi!
These are just simple snippets of codes that will allow us to create a modal dialog box.

HTML

<div id="overlay">
    <div>
        <p>I am a hidden div and will be displayed as a modal!</p>
        <p>Charlungs!</p>
    </div>
</div>
<button onclick='overlay()'>Click</button>

CSS

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background:url('http://jasongraphix.com/static/uploads/googlebg-dadada.png');
    /** replace background image with a transparent gray image **/
}
#overlay>div {
    width:300px;
    margin: 100px auto;
    background-color: fff;
    border:3px solid #000;
    padding:15px;
    text-align:center;
}

Javascript

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

FIDDLE

Better ideas? Leave a message on the comments section.

Credits to:

• RAVEN Blog

Read more ...

Enable Auto-Complete in Notepad++

I have been using Notepad++ ever since I started working but I have no idea it has an auto-complete feature just like other IDE's. *silly me*

So here's how to enable it:

1. Go to Settings.
2. Click on Preferences.
3. Go to Backup/Auto-Completion.
4. Check Enable auto-completion on each input.

That's it.

Read more ...

jQuery: Start Date and End Date

We commonly see on websites some input fields that would require us to enter a date range.

This means we should be able to select a start date and end date.

Of course, start date should always be before the end date and the end date should always be later than the start date.

Being a Tech Noob, I have no idea how to do this, especially since web programming isn't really my forte.

Fortunately, a lot of helpful tips can be found online!

Here's one.

We need the following:

1. jQuery Library
2. jQuery UI
3. jQuery CSS

HTML

<input type="text" id="start_date">
<input type="text" id="end_date">

Javascript

$(function() {
 $("#start_date").datepicker({
  onSelect: function(selected){
   $("#end_date").datepicker("option","minDate", selected)
        }

 });
 $("#end_date").datepicker({
  onSelect: function(selected) {
   $("#start_date").datepicker("option","maxDate", selected)
        }

 });
});

FIDDLE

Let me know if you have other better ways in mind. (:

Read more ...