A Simple Css Only Hover Dropdown Menu


A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu.

The HTML

The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.

These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.

<ul id="menu">

<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>

</ul>

The CSS

<style>

li ul {

display: none;

}

li:hover ul {

display: block;

}</style>

Your required minimal form of dropdown menu can be found bellow for download.

  • Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.
  • In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.
  • The drop down menu is fast, simple and effective
  • A drop down menu could never be so simple to design and using CSS alone.
  • The menu is designed purely using CSS and avoids any jQuery or Javascript library which makes it much more faster and simple.

A more advance version ready to use and good looking can be found bellow.

7+ Useful jQuery Techniques For URLs, Querystrings and Hash Parameters


Normally we use Server side scripts like PHP, ASP, C# to retrieve the information required about our Page URL, QueryString and Hash Parameter. But amazingly it can also be done using Javascript or jQuery too. It can be very handy considering the speed of program as well as ease in programming.
The following are examples of useful code snippets which we can directly use.

1. Get the Current Page URL

A very simple snippet, which stores the current page URL in a variable:

// Retrieve current URL
var url = document.URL;

2. Get the Current Page Root URL

A very simple snippet, which stores the root URL in a variable:

// Retrieve root URL
var root = location.protocol + '//' + location.host;

3. Highlight Current Menu Item

Rather than manually modify navigation menus to add an “active” class to the current page we can use jQuery to identify which link contains the current URL which will save a lot of programming time:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

 

4. Page Redirect Using Javascript
If you need to redirect a page using jQuery:

// Redirect - insert required URL
window.location.href = "https://itswadesh.wordpress.com/";

5. Get Querystring Parameters of the Current Page

If the URL contains a querystring with multiple parameters the following snippet will parse each parameter and store the array as a variable:

var vars = [], hash;
var q = document.URL.split('?')[1];
if(q != undefined){
q = q.split('&');
for(var i = 0; i < q.length; i++){
hash = q[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
}

To use any of the parameters you can access the value using the parameter name. E.g. if the URL contains the querystring “?a=3&b=2&c=1″ you can access the value for “a” using:

// Will alert the value of parameter a
alert(vars['a']);

6. Get the URL Hash Parameter

Retrieve a hash parameter and store in a variable:

// Get # parameter
var param = document.URL.split('#')[1];

7. Change Browser Address Bar Hash Parameter

In the example below we replace the hash parameter, which we get from the clicked link. Useful for adding bookmarking capabilities when using AJAX:

// update browser address bar URL
$('a.demo-link').click(function(){
var hash = $(this).attr('href');
location.hash = hash;
});

8. Check If Link Contains External URL

The following snippet will check if a clicked link contains a URL to an external web page and if so, open in a new browser window:

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
this.target = "_blank";
});

How to Display Author Info Box of a Guest Post in Blogger


Sometimes bloggers accept guest post due to lack of time. In return they provide the author with some quality backlinks and advertisement. Hence it becomes necessary to display some information about the author in a polite and attractive manner. This further encourage more and more people to write quality articles for us.

The tutorial bellow explains how to create and add it into the blogger template. I’ve used only HTML and CSS to implement this.

So Lets jump straight to the tutorial part!

How To Create a Customized Author Info Box in Blogger?

 

1. Go To Blogger > Template > Backup > Download Full Template


 

2. Click On Edit HTML

 

 

3. Search for ]]></b:skin>

 

 

4. Just above it paste the code below

 

#ipi_profile{width:500px;height:100px;border:1px solid #dcdcdc;background-color:#f9f9f9;font:bold 12px "Trebuchet MS",Verdana,Arial}
.ipi_pic{float:left;margin:6px}
.ipi_pic img{border:4px solid #fff}
.ipi_details{float:left;border-right:1px solid #dcdcdc;padding:0 15px 10px 10px;margin-top:10px}
.ipi_contact{float:left;margin-top:10px;padding:0 0 0 15px}
.ipi_facebook,.ipi_facebook:hover{color:#3c5a98;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_twitter,.ipi_twitter:hover{color:#29c9ff;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_mailto,.ipi_mailto:hover{color:#000}

 

5.    Now Save your template and write the html code to display the author info

Whenever you write a guest post, switch to HTML mode of the editor and at the end add the code below


<!------------ Author Info Box Start ------------>
<b>Writer</b><br />
<div id="ipi_profile">
<div>
<img alt="Ipsita Sahoo" src="http://4.bp.blogspot.com/-KWqHBYbwJOI/T6EVr4BxgAI/AAAAAAAAAAs/oADS2-J3Yzs/s220/ipi.JPG" width="80px" />
</div>

<div><span style="color: #3292dc; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal;">Ipsita Sahoo</span><br />
Manager<br />
Odisha, INDIA
</div>
<div><span style="color: #666666; font-size: 10px;">&nbsp;</span> <br />
<span style="color: #666666; font-size: 10px;">Email&nbsp; :</span> <a href="mailto:ipsita@gmail.com">ipsita[at]gmail.com</a><br />
<div style="float: left; margin-top: 10px;"><div style="background-color: #1a4485; color: white; float: left; font: bold 14px arial; padding: 2px 4px;"><a href="http://www.facebook.com/ipi" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">facebook</a></div><div style="background-color: #6fdbff; color: white; float: left; font: bold 14px arial; margin-left: 5px; padding: 2px 4px;"><a href="http://www.twitter.com/duskycode" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">twitter</a></div></div>
</div>
</div>

I hope the above tutorial was useful. Keep commenting.

How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>

Facebook type vertical navigation menu created with jquery


The above picture shows a facebook page which gets loaded asynchronously with history support. This amazing technology of facebook is now been adopted by other websites also.

The whole thing contains only 2 pages conceptually.

1. The menu

2. The content space

Features

  • This plugin is cache enabled. It helps the page loading faster with the use of cacheing technology which restricts the number of unnecessary database server requests
  • Contents loads using AJAX but still back button is enabled. Hence visible to search engines (SEO optimized).
  • Contents loads much faster as only the content is loaded instead of each page separately.
  • Further, it has a built in browser history support (Back button enabled).
  • Requested pages loads sequencially (e.g first content then advertisements).
  • An AJAX loading gif is shown while loading the page.
  • Individual pages to fill in the content space.
  • Nicely positioned css layout like facebook vertical menu.
  • Also includes images to make the menu user friendly.
  • Clean and simple code design to make your embeding task easy.
  • Allows users to perform multiple tasks (requests) at a time.
  • This plugin is developed using Benalman’s jQuery BBQ plugin.

Add the following scripts to your page template

<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/facebook_vertical_menu.js"></script>

Add the following CSS to your page template

<link href="css/fb_menu.css" rel="stylesheet" type="text/css"/>

Add the following customized jQuery code just above the head section

 
 <script type="text/javascript">
/* //If used along with other jquery framework other than v1.4.1
//Uncomment this piece of code
setInterval("update2()", 1000); // Update every 10 seconds 

function update2()
{$(function()
{
});
}
*/
</script>

Put all your menu items inside a UL tag like bellow

<ul>
        <li><a href="#wall.htm"><img src="images/blogs.png" height="14"/>Wall</a></li>        
        <li><a href="#Information.htm" href="#"><img src="images/info.png" height="14"/>Info</a></li>        
        <li><a href="#Friends.htm"><img src="images/friends.png" height="14"/>Friends</a></li>      
        <li><a href="#Groups.htm"><img height="14" src="images/groups.png"/>Groups</a></li>
        <li><a href="#Photos.htm"><img src="images/photos.png" height="14"/>Photos</a></li>
        <li><a href="#Messages.htm"><img src="images/messages2.png" height="14"/>Messages</a></li>

</ul>

Here is the content area where the result will be displayed

<div id="centercolumn">
              <!-- single pane -->
<div>

  <div style="display: none;">

</div></div></div>

10 Awesome Button Maker Tools using html, css and jquery


Online button makers make your web designing job easy according to your front end design needs. You can choose different styles, modify colors and customize them in several ways to suit your needs using different button makers available in internet to save much of your time in web development(design).

CSS Tricks

It allows you select gradient color, borders, hover backgrounds etc for perfectly unique buttons for your webpage.

CSS Tricks

CSS Tricks

Continue reading

20 jquery drop down menus you should try


Drop down menus are always the best choice for web designers.  It can save a lot of space as well as it provides a clean looks

we have collected a whamming collection of jQuery dropdown menus to give a new inspiration for your designs. Check out the post and let us know which one appeals you the most.

Create The Fanciest Dropdown Menu You Ever Saw

This teaches you how to create this stunning website dropdown navigation menu. The dropdown menu uses HTML, CSS and Javascript.

Create The Fanciest Dropdown Menu You Ever Saw

More Info on Create The Fanciest Dropdown Menu You Ever Saw

 

Continue reading