li Design with Close Button Using jQuery. In this tutorial there are two features highlighting, one is box-shadow when move mouse on the box and another one is close button for every box. In this article i have explained how to make this box-shadow and close button.
we are going to use CSS and jQuery. CSS for the effect, when we move mouse over the box and jQuery for close button.
When mouse in moved on the li tag, li:hover’s box-shadow: 1px 1px 16px 5px #BBB; will work.
stylesheet
[code type=css]
<style type=”text/css”>
li
{
font-size: 48px;
text-align: center;
float: left;
margin: 30px;
display: block;
width: 300px;
height: 200px;
border: 1px solid #423333;
background-color: #E0E0E0;
cursor: pointer;
}
li:hover
{
float: left;
margin: 30px;
display: block;
width: 300px;
height: 200px;
border: 1px solid black;
cursor: pointer;
box-shadow: 1px 1px 16px 5px #BBB;
}
span
{
float:right;
font-size:24px;
}
</style>
[/code]
jQuery
jQuery function will be called, when we click “X” in span tag.
$(this).hide(); – hide the “x”
$(this).parent().hide(‘slow’); – hide the parent “li” box.
[code type=jquery]
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“span”).click(function() {
$(this).hide();
$(this).parent().hide(‘slow’);
});
});
</script>
[/code]
HTML Code
[code type=html]
<html>
<head>
</head>
<body style=”margin:0 auto; width:800px;”>
<ul>
<li>A
<span>x</span>
</li>
<li>B
<span>x</span>
</li>
<li>C
<span>x</span>
</li>
<li>D
<span>x</span>
</li>
</ul>
</body>
</html>
[/code]
index.html
[code type=html]
<html>
<head>
<style type=”text/css”>
li
{
font-size: 48px;
text-align: center;
float: left;
margin: 30px;
display: block;
width: 300px;
height: 200px;
border: 1px solid #423333;
background-color: #E0E0E0;
cursor: pointer;
}
li:hover
{
float: left;
margin: 30px;
display: block;
width: 300px;
height: 200px;
border: 1px solid black;
cursor: pointer;
box-shadow: 1px 1px 16px 5px #BBB;
}
span
{
float:right;
font-size:24px;
}
</style>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“li span”).click(function() {
$(this).hide();
$(this).parent().hide(‘slow’);
});
});
</script>
</head>
<body style=”margin:0 auto; width:800px;”>
<ul>
<li>A <span>x</span> </li>
<li>B <span>x</span> </li>
<li>C <span>x</span> </li>
<li>D <span>x</span></li>
</ul>
</body>
</html>
[/code]