-->

ثلاثة قوائم جاهزة للإستعمال | Css Html Jquery |



السلام عليكم ورحمة الله تعالى وبركاته 

قبل أن أدخل للموضوع وبهاته التدوينة سنفتتح قسم جديد خاص بملحقات الويب والقوالب يعني سنقدم لكم ملحقات جاهزة 

للإستخدام  Css - Jquery - Html - Java 

وكتدوينة أولى لهذا القسم سنقدم لكم قوائم أو ما يعرف بــ Menu تتضمن 3 قوائم بتصميم مميز ونظرة حلوة :) من التصميم 

المسطح إلى التصميم 2D ، أيضا بقائمتيين توجد قوائم منسدلة .. 





معاينة


Css

/* Menu Dropdown */
.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.menu,
.submenu {
margin: 0;
padding: 0;
list-style: none;
}

.menu {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}

.menu > li {
background: #34495e;
float: left;
position: relative;
transform: skewX(25deg);
}

.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}

.menu li:hover {
background: #e74c3c;
}

.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}

/* Dropdown */
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}

.submenu li {
background-color: #34495e;
position: relative;
overflow: hidden;
}

.submenu > li > a {
padding: 1em 2em;
}

.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}

.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}

.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}

.submenu li {
transition: .2s ease transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}

.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}


HTML

<ul class="menu cf">
<li><a href="">Menu item</a></li>
<li>
<a href="">Menu item</a>
<ul class="submenu">
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
</ul>
</li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
</ul>


JavaS

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

__________________________________________



معاينة



Css

nav ul{
position:relative;
list-style:none;
}

nav ul li{
float:left;
}

nav ul li a{
padding:25px 15px;
background:#eee;
color:#333;
display:block;
font-family: 'PT Sans', sans-serif;
text-decoration:none;
}

.lamp{
position:absolute;
height:4px;
background:#333;
transition:all .3s linear;
}

.selected.active a,.active a{
background:#00bfff !important;
transition:all .3s linear;
color:#fff;
}

HTML

<nav>
<ul>
<li><a href='#'>Home</a></li>
<li class='selected'><a href='#'>Articles</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li class='lamp'></li>
</ul>
</nav>


  Js - Jquery

<script type='text/javascript'>
//<![CDATA[
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
$('nav ul li').mouseenter(function(){
$('nav ul li').removeClass('active');
$(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
});
$('nav ul li').mouseout(function(){
$('nav ul li').removeClass('active');
$('.selected').addClass('active');
var currentleft=$('.selected').position().left;
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
});
//]]>
</script>





Css


.nav a{
text-decoration:none;
}

.nav{
height:70px;
background:#222;
position:relative;
}

.nav>ul{
position:relative;
list-style:none;
padding:0;
margin:0;
}

.nav>ul>li>ul{
position:absolute;
left:0;
padding:0;
margin:0;
list-style:none;
}

.nav>ul>li:hover>ul li a{
opacity:1;
height:50px;
transition:all .3s linear;
}

.nav>ul>li>ul a{
display:block;
color:#222;
width:150px;
line-height:50px !important;
font:700 14px 'pt sans',sans-serif;
background:#eee;
border-bottom:1px solid #ddd;
text-align:center;
padding:0 5px;
height:0;
overflow:hidden;
opacity:0;
transition:all .3s linear .2s;
}

.nav>ul>li{
float:left;
position:relative;
}

.nav>ul>li>a{
padding:0 20px;
color:#fff;
display:block;
line-height:70px !important;
font:400 15px 'PT Sans', sans-serif;
text-transform:uppercase;
text-decoration:none;
}

.lamp span{
display:block;
height:4px;
background:#ee6666;
position: relative;
}

.lamp span:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(238, 102, 102, 0);
border-bottom-color: #ee6666;
border-width: 4px;
margin-left: -4px;
}

.lamp{
position:absolute !important;
height:4px;
top:66px;
background:#333;
transition:all .3s linear;
}

.selected.active>a,.active>a{
transition:all .3s linear;
color:#fff;
}

HTML


<div class='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Articles</a>
<ul>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Wordpress</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Psd</a></li>
</ul>
</li>
<li><a href='#'>Subscription</a>
<ul>
<li><a href='#'>Free</a></li>
<li><a href='#'>Buy</a></li>
<li><a href='#'>Silver</a></li>
<li><a href='#'>Gold</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li class='lamp'><span></span></li>
</ul>
</div>

  Js - Jquery


<script type='text/javascript'>
//<![CDATA[
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
$('.nav>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
$('.nav>ul>li').hover(function(){
$('.nav ul li').removeClass('active');
$(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
},function(){
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
$('.nav>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
});
//]]>
</script>


ليست هناك تعليقات :

إرسال تعليق

=a= =b= =c= =d= =e= =f= =g= =h= =j= =k= =l= =m= =n= =o= =p= =q= =w= =x= =y= =z=