Last Updated:

Menu with drop-down sub-items in jQuery

After a short break, we continue to consider interesting features for the site. As you know, on each site you can find navigation, which greatly simplifies the user's journey through the pages. It seemed simple, we will consider another, unremarkable menu, but no, in this navigation there is some advantage, these are drop-down sub-items with registration, authorization and contact form in one bottle. This is very practical, and will surely attract the eyes of users with its originality.
 
Menu with drop-down sub-items in jQuery

To create this navigation, we will use the FormBox plugin. It is a navigation menu using jQuery and CSS3 that supports integrated forms. This lesson provides forms for logging in, registering, updating your password and contact. All of them fall out of the menu when you hover the mouse cursor over the corresponding item. Such an interface will get rid of unnecessary pages with forms and simplify the process of user interaction with the site.

 

Each form is a tab that is enabled when you hover over a mouse cursor menu item by ID (for example, #tab2). This approach allows you to simply combine ordinary menu items with drop-down bookmarks. First, let's look at the structure of HTML:

<div id="tabs">
<ul id="tabMenu">


<li class="regular"><a href="home.html">Home</a></li>
<li class="dropdown"><a href="#tab1">Login</a></li>
<li class="dropdown"><a href="#tab2">Register</a></li>
<li class="dropdown"><a href="#tab3">Forgot password</a></li>
<li class="regular"><a href="home.html">Prices</a></li>
<li class="regular"><a href="home.html">About us</a></li>
<li class="dropdown"><a href="#tab4">Contact</a></li>
<li class="edges">&nbsp;</li>


</ul>
</div>


<div id="tabContainer">
<ul id="tabPanes">
<li id="tab1">


<p>


<div class="formcontainer">


<div class="text">
<label for="username">Name</label>


<input type="text" name="username" id="username" alt="The username you chose when you signed up.">
</div>


<div class="text">
<label for="password">Password</label>
<input type="text" name="password" id="password" alt="The password you entered when you signed up.">
</div>


<div class="text">
<br>


<input type="checkbox" name="rememberme" id="rememberme"> Remember me


</div>
</div>


<center>


<div class="block" id="bluebutton">
<button>Login</button>
</div>
</center>


</p>


</li>


. . .
</ul>


</div>

The menu is an ordinary unordered list, the items of which have a class 'regular' or 'dropdown' depending on the type. The following is a container in which the contents of the bookmarks are determined. FormBox works based on the hoover event.

$(window).load(function(){


var tabs = $("#tabs");
var tabPanesContainer = $("ul#tabPanes");
var tabPanesAll = tabPanesContainer.find("li").css("position", "absolute");
var tabMenuLinks = $("ul#tabMenu .dropdown");
var regularLinks = $("ul#tabMenu .regular");
var dropDownSpeed ​​= 200;
var dropUpSpeed ​​\u003d 200;
var menuHeight = '240px';


/*Close the currently open menu*/
function closeMenu()
{


tabMenuLinks.removeClass('activeTab');


tabPanesContainer.stop().animate({
height: '0px'
}, dropUpSpeed);


}


/*Process menu links without bookmarks*/
hover(function()
{
tabPanesContainer.stop().animate({
height: '0px'
});


tabMenuLinks.removeClass('activeTab');
$(this).addClass('activeTab');


}, function() {
$(this).removeClass('activeTab');


});


/*Process menu links with bookmarks*/
tabMenuLinks hover(function()
{


var thisMenuItem = $(this);


/*Get the offset for the item relative to the page*/
var thisMargin = thisMenuItem.offset().left;


/*Get the offset for the navigation bar relative to the page*/
var tabsOffset = tabs.offset().left;
var thisIndex = thisMenuItem.index();


thisMargin = Math.floor(thisMargin - tabsOffset);


var thisOffset = thisMargin - 52;


/* Handle margin difference for IE */
if($.browser.msie)
{
thisOffset = thisMargin - 15;
}


tabPanesContainer.css('margin-left', thisOffset);


tabPanesContainer.stop().animate({
height:menuHeight
}, dropDownSpeed);


tabMenuLinks.removeClass('activeTab');
thisMenuItem.addClass('activeTab');


var thisHash = thisMenuItem.find("a").attr('href');
var tabClicked = tabPanesAll.filter(thisHash);


tabClicked.appendTo(tabPanesContainer).show();


return false;


}, function() {


$(this).stop();


});


/*Handling the mouse over the bookmark container*/
tabPanesContainer.hover(function()
{


}, function()
{
closeMenu();
});


$('.edges').hover(function()
{
closeMenu();


}, function()
{
});


});

 

#tabs {
width:604px;
height:47px;
background-image:url('../images/wooden8.png');
-webkit-box-shadow: 0px 5px 6px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 6px ;
box-shadow: 0px 5px 6px ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:Arial;
font-size:14px;
margin:0 auto;
}
ul#tabPanes
{
    margin-left:52px;
    position:relative;
    width:227px;
    overflow: hidden;
    clear:both;
    font-family:Arial;
    list-style-type: none;
    margin-top:-0px;
    position:absolute;
}
ul#tabPanes li
{
    width: 227px;
}
ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4
{
    height:227px;
    margin-top:-30px;
    margin-left:-3px;
    display:none;
    text-shadow: #ffffff 0px 1px 0px;
     background-color:#C9AA7C;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-right-radius:5px;
     -webkit-border-bottom-left-radius:5px;
     background-image:url('../images/wood3.jpg');
     background-repeat:no-repeat;
    -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.6);
     -moz-box-shadow: 0px 3px 4px ;
     box-shadow: 0px 3px 4px ;
}

When you hover the mouse cursor over the input field, the code checks for the presence of the alt attribute in it. If an attribute is present, a tooltip appears next to the input field. when the mouse cursor leaves the input field, the tooltip is simply removed.