Модална форма за вашето меню!
Много често при разработка на нашите страници искаме да имаме някой друга нова функционалност или нещо по свежо.
Скоро се замислих какво ми липсва в някой от моите проекти и реших, че е време да си направя модална форма, където ще ми бъде изнесена повечето навигация.
Предимствата на този тип форми е че left side и right side в един сайт стават ненужни.
И така седнах и си написах един Jquery plugin, който следи всеки hover елемент
например:
<a href="#">Home</a>
и прихваща събитие за показване на span елемент който в началото е скрит с display: none на css;
ето и кода надявам се да съм полезен;
Как да използвате кода
1.Създайте папка modal-box
2.Създайте html файл с име index.html в папка modal-box и копирайте html кода
3.Създайте css файл с име style.css в папка modal-box и копирайте css кода
4.Създайте js файл с име modal-box.js в папка modal-box и копирайте jQuery кода
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="modal-box.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="modal-box.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
$('a').zoom();
});
</script>
</head>
<body>
<header>
<li>
Home
<span class="modal-box">
<div class="add-image"></div>
<p class="add-data">This is sample modal home box 1</p>
</span>
</a>
</li>
<li>
Contact
<span class="modal-box">
<div class="add-image"></div>
<p class="add-data">This is sample modal contact box 2</p>
</span>
</a>
</li>
</div>
</header>
</body>
</html>
CSS
/*
development by mehmedov
email: jakomena@gmail.com
main modal box css
*/
/* ----- modal modal box style */
.modal-box {
display: none;
padding: 20px 30px;
width: 500px;
}
.modal-box p {
text-transform: uppercase;
font-size: 18px;
text-align: center;
background: #f5f5f5;
color: #2d2d2d;
border-radius: 5px;
height: 180px;
margin: 0 auto;
}
.modal-box .add-image {
float: left;
margin: 0 auto;
background: url(photo_kids.png) no-repeat;
width: 200px;
height: 200px;
}
.modal-box .add-data{
float: right;
width: 250px;
margin: 0 auto;
}
.modal-box-show {
float: left;
display: block;
padding: 20px 30px;
border-radius: 5px;
list-style: none;
background: #fff;
z-index: 1000;
}
/* ----- end modal modal box style */
jQuery
/*
development by mehmedov
email: jakomena@gmail.com
create modal box hover element
*/
(function($){
$.fn.zoom = function() {
var element = $(this.selector);
element.hover(function () {
var box = $(this).find('span');
box.addClass('modal-box-show');
});
element.mouseleave(function () {
var box = $(this).find('span');
box.removeClass('modal-box-show');
});
}
})(jQuery);
Поздрави мехмедов!
