How to add hash (#) link in Drupal (7.x) menu

Below is the code which shows how we can use the hash link, once it has been declared in our custom module.

Create a module with .info and .module extensions. In your .module extension, use the below mention code.

/**
 * Implements hook_menu().
 *
 * Defines a valid link to use when creating menu items.
 */
function MYMODULE_menu() {
  $items = array();
  $items['hash_link'] = array(
    'page callback' => 'drupal_not_found',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 * Implements hook_menu_link_alter().
 *
 * Flags the link to be altered at runtime.
 *
 * Note: Changes here would be saved back to the database.
 */
function MYMODULE_menu_link_alter(&$item, $menu) {
  if ($item['link_path'] == 'hash_link') {
    $item['options']['alter'] = TRUE;
  }
}

/**
 * Implements hook_translated_menu_link_alter().
 *
 * Refactors the link to go to the fragment #hash_link.
 */
function MYMODULE_translated_menu_link_alter(&$item, $map) {
  if ($item['link_path'] == 'hash_link') {
    $item['href'] = '';
    $item['localized_options']['fragment'] = 'hash_link';
  }
}

Once you have activated your module, go to your menu where you want to add the hash link, for instance I would like to add hash link in my main menu so I will access admin/structure/menu/manage/main-menu/add and there I will create a menu such as "About" with path as "hash_link"

jQuery Context Menu

In this tutorial I am sharing my newly created jQuery Plugin, jQuery Simple Context Menu.

GITHUB REPO :
https://github.com/nirajmchauhan/jquery-simple-context-menu

---

Currently this plugin accepts two paramenters:

• Custom HTML - You have to give entire HTML code with proper attributes in it wrapped inside ul
  


• 
  Simple HTML - You have to pass href link and the text to be shown.
  

Simple HTML usage
Include the jquery file, you can download this from github.

---

[js]

jQuery(function($){
$(document).ready(function(){

$('#Simple').simpleContextMenu({
options : {
'Home' : '#',
'About Us' : '#',
'Services' : '#',
'Contact Us' : '#'
}
});

});
});

[/js]

---

Inside options you need to pass text and the link, the above code will generate a HTML in following format :

[html]
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
[/html]

---

Custom HTML usage

---

[js]

jQuery(function($){
$(document).ready(function(){

$('#CustomHTML').simpleContextMenu({
html: '<div class="dropdown clearfix"><ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"><li><a href="#" tabindex="-1">Action</a></li><li><a href="#" tabindex="-1">Another action</a></li><li><a href="#" tabindex="-1">Something else here</a></li><li class="divider"></li><li><a href="#" tabindex="-1">Separated link</a></li></ul></div>'
});

});
});

[/js]

---

Inside html you need to pass entire html which will be the context menu. Above I am using bootstrap.

Both parameters cannot be used together, use only one at a time. You can have multiple context menus on a single page. Check out the demo and fork me.

CSS3 Powered Portfolio & Menu

Today I just saw a nice JQuery menu which impressed me and my friends. One of my friend challenged me to make this in CSS3, so within few hours I completed the challenge and came up with a nice concept of PORTFOLIO + MENU.

I am going to share a tutorial on making a portfolio website within a menu using CSS3.

We will make a li list menu and inside that we will wrap our content div,

• on hover of menu some nice effects + on click our content = a perfect CSS3 powered portfolio website.

HTML Markup:

[html]
<div id="wrapper">
<div id="portfolio">
<ul id="box">
<li style="background-color: #2C618F;">Home
<input type="checkbox" id="oneCheck" />
<label for="oneCheck"></label>
<div class="content" style="background-color: #2C618F;"><p>Welcome to WebsTutorial.Com(WT), find amazing tutorials on CSS3, HTML5, PHP, JQuery, AJAX, Wordpress and many more.<br />
Some cool tutorials.
<dl id="list">
<dt><a href="http://webstutorial.com/range-input-slider-html5-css3/html-5" target="_blank">HTML5 Range Slider</a></dt>
<dt><a href="http://webstutorial.com/css3-tabs/css3" target="_blank">CSS3 Tabs</a></dt>
<dt><a href="http://webstutorial.com/css3-clock/css3" target="_blank">CSS3 Clock</a></dt>
</dl>
</p><label for="oneCheck">X</label></div>
</li>
<li style="background-color: #91AB31;">About Us
<input type="checkbox" id="twoCheck" />
<label for="twoCheck"></label>
<div class="content" style="background-color: #91AB31;"><p>WebsTutorial is a website for all kind of website coders, here we share amazing tutorials on topics like HTML5, CSS3, JQuery, AJAX etc. We also share tutorials for making you learn PHP, cake php, codeigniter. We also work as freelancers for making websites in CMS or Frameworks.</p><label for="twoCheck">X</label></div>
</li>
<li style="background-color: #714A28;">Portfolio
<input type="checkbox" id="threeCheck" />
<label for="threeCheck"></label>
<div class="content" style="background-color: #714A28;">
<p style="overflow-y: scroll; height: 200px; padding: 0pt 40px;">
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img1.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img2.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img3.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img4.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img5.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img6.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img7.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img8.jpg" />
</p>
<label for="threeCheck">X</label></div>
</li>
<li style="background-color: #E58600;">Contact Us
<input type="checkbox" id="fourCheck" />
<label for="fourCheck"></label>
<div class="content" style="background-color: #E58600;"><p>You can always contact us by emailing us your queries, suggestions or enquiries on <a href="mailto:admin@webstutorial.com">admin@webstutorial.com</a></p><label for="fourCheck">X</label></div>
</li>
</ul>
</div>
</div>
[/html]

HTML is really simple ti understand, now comes the CSS3 code:

[css]
ul#box {
background: none repeat scroll 0 0 #EEEEEE;

-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
float: left;
padding: 20px;
position: relative;
width: 400px;
}

#box li {
list-style-type: none;
float: left;
width: 200px;
font-size: 0px;

-webkit-transition: font ease 500ms;
-moz-transition: font ease 500ms;
-o-transition: font ease 500ms;
-ms-transition: font ease 500ms;
transition: font ease 500ms;
width: 200px;
height: 120px;
text-align: center;
color: #fff;
font-style: italic;
overflow: hidden;
}

#box li input[type="checkbox"] {
display: none;
}

#box li:hover {
font-size: 28px;

background-image: -webkit-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

#box li label {
background: transparent;
width: 200px;
height: 120px;
display: block;
}

.content {
height: 0;
overflow: hidden;
padding: 0;
width: 0;
font-size: 12px;

-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
z-index: 100;
position: absolute;
top: 20px;
left: 20px;
}

#oneCheck:checked ~ .content,#twoCheck:checked ~ .content,#threeCheck:checked ~ .content,#fourCheck:checked ~ .content {
font-size: 12px;
height: 230px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
padding: 10px 10px 0;
width: 380px;
overflow: visible;
}

.content label {
display: none;
}

#oneCheck:checked ~ .content label,#twoCheck:checked ~ .content label,#threeCheck:checked ~ .content label,#fourCheck:checked ~ .content label {
border: 5px solid #FFFFFF;

-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF;
cursor: pointer;
font: bold 20px/40px arial,helvetica;
height: 40px;
position: absolute;
right: -20px;
text-align: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
background: #000000;
top: -20px;
width: 40px;
}
[/css]

We are simply using checkbox to show and hide the portfolio content using :checked pseudo class.
On checked we are showing the content div using CSS3 transition effects.

Why to use JQuery when you have power of CSS3 ;)