Untitled diff
创建于 差异永不过期
$(document).ready(function () { /* Run code only if page is loaded */
$(function () {
$('#content').hide(); /* Hide content container */
var contentSearch = '<ul>' +
$('#content').hide();
var contentSearch = '<ul class="submenu">' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">DuckDuckGo</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">DuckDuckGo</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">Google</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">Google</a></li>' +
'</ul>';
'</ul>';
$('#search').hover(function () { /* Headline is hovered upon */
var pos = $(this).position(); /* Get the position of the headline container relative to its parent */
var headlineWdth = $(this).width(); /* Get the width of the headline container */
$('#content').html(contentSearch); /* Content container gets its content filled in */
var contentWdth = $('#content').width(); /* Get the width of the content container */
var contentWdthRemaining = contentWdth - headlineWdth; /* Content width minus headline width equals the remaining width of the content container */
var posSubtract = contentWdthRemaining / 2;
/* Remaining content container width will be divided by 2, that way it can be later subtracted from the offset position
in order for us to place the content container directly bellow the headline */
$('#content').css({
'left': pos.left - posSubtract
}); /* Place content container right bellow the headline */
$('#content').slideDown('fast'); /* Show content container with a fast slide down animation */
}, function () { /* The headline is not hovered upon anymore */
$('#content').hide(); /* immediately hide the content container */
$('#content').html(''); /* Clear previous html input so it won't be seen in the page inspector tool */
});
var contentNews = '<ul>' +
var contentNews = '<ul>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">kekhueawd</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">kekhueawd</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">eheheheheheheeh</a></li>' +
'<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">eheheheheheheeh</a></li>' +
'</ul>';
'</ul>';
$('#news').hover(function () { /* Headline is hovered upon */
var pos = $(this).position(); /* Get the position of the headline container relative to its parent */
var submenuTimeout;
var headlineWdth = $(this).width(); /* Get the width of the headline container */
$('#content').html(contentNews); /* Content container gets its content filled in */
debugger;
var contentWdth = $('#content').width(); /* Get the width of the content container */
var contentWdthRemaining = contentWdth - headlineWdth; /* Content width minus headline width equals the remaining width of the content container */
$(document.body)
var posSubtract = contentWdthRemaining / 2;
/* Remaining content container width will be divided by 2, that way it can be later subtracted from the offset position
.on('mouseover', '#search', function (e) {
in order for us to place the content container directly bellow the headline */
$('#content').css({
var pos = $(this).position();
'left': pos.left - posSubtract
var headlineWdth = $(this).width();
}); /* Place content container right bellow the headline */
$('#content').slideDown('fast'); /* Show content container with a fast slide down animation */
$('#content').html(contentSearch);
}, function () { /* The headline is not hovered upon anymore */
$('#content').hide(); /* immediately hide the content container */
var contentWdth = $('#content').width();
$('#content').html(''); /* Clear previous html input so it won't be seen in the page inspector tool */
var contentWdthRemaining = contentWdth - headlineWdth;
var posSubtract = contentWdthRemaining / 2;
$('#content')
.css({
'left': pos.left - posSubtract
})
.slideDown('fast');
})
.on('mouseover', '#news', function () {
var pos = $(this).position();
var headlineWdth = $(this).width();
$('#content').html(contentNews);
var contentWdth = $('#content').width();
var contentWdthRemaining = contentWdth - headlineWdth;
var posSubtract = contentWdthRemaining / 2;
$('#content')
.css({
'left': pos.left - posSubtract
})
.slideDown('fast');
})
.on('mouseover', '.submenu', function () {
clearTimeout(submenuTimeout);
})
$('#nav').on('mouseleave', function (e) {
submenuTimeout = setTimeout(function () {
$('#content').hide().html('');
}, 50)
});
});
});
});