How to make cross frame menus using jquery
Here is simple & easy tutorial of making cross frame menus by using jquery. In this example, i've used 2 frames.
i. top_frame (top_frame.html)
ii. bottom_frame (bottom_frame.html)
In 'top_frame' i've made a parent menu as 'Home'. All, sub-menus of parent menu(Home) are in 'bottom_frame'. So, now when user will click on 'Home' link all sub-menus should be shown. But, as both the content are in 2 different frames it not that simple to do that.
But, by using javascript we can make communication between 2 frames of same origin & this technique uses this method to design this 'cross frame menus'.
So, what i've done i've hide the sub-menus list by default using CSS display:none; property.
EX:
Now, in top frame when there is click happen on 'Home' link i show the sub-menus by changing display:none; to display:block; by using Jquery. Here the sample code for that.
EX:
One more thing which i've done in the above jquery code is that, if any click happen except the 'Home' link in top frame the sub-menu list get hide again. So that, it actually behave like a dropdown menus.
You can download the full code from here : https://www.box.com/s/prp8q3p5qu1o26r0ym5e
Hope it'll be useful.
i. top_frame (top_frame.html)
ii. bottom_frame (bottom_frame.html)
In 'top_frame' i've made a parent menu as 'Home'. All, sub-menus of parent menu(Home) are in 'bottom_frame'. So, now when user will click on 'Home' link all sub-menus should be shown. But, as both the content are in 2 different frames it not that simple to do that.
But, by using javascript we can make communication between 2 frames of same origin & this technique uses this method to design this 'cross frame menus'.
So, what i've done i've hide the sub-menus list by default using CSS display:none; property.
EX:
<ul class="glossymenu">
<li><a class="l1" href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a class="l2" href="http://www.dynamicdrive.com/style/">CSS Examples</a></li>
<li><a class="l3" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a class="l4" href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a class="l5" href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a class="l6" href="http://www.codingforums.com/">Coding Forums</a></li>
</ul>
Now, in top frame when there is click happen on 'Home' link i show the sub-menus by changing display:none; to display:block; by using Jquery. Here the sample code for that.
EX:
$(document).ready(function(){
$('.glossymenu').click(function(){
$(parent.bottom_frame.document).contents().find('.glossymenu').toggle();
});
$(document).click(function(event){
if( $(event.target).hasClass("home") )
{ return; }
$(parent.bottom_frame.document).contents().find('.glossymenu').hide();
});
});
One more thing which i've done in the above jquery code is that, if any click happen except the 'Home' link in top frame the sub-menu list get hide again. So that, it actually behave like a dropdown menus.
You can download the full code from here : https://www.box.com/s/prp8q3p5qu1o26r0ym5e
Hope it'll be useful.
Oop's, No Comments has been droped for this thread yet now.
Why don't you drop one.