كود قائمة الازرار
3 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
كود قائمة الازرار
السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين
أريد كود قائمة ازرار
اي عند الضغط مثلا على زر تظهر قائمة
بانتظاركم وشكرا
رد: كود قائمة الازرار
⊱Queen⊰ كتب:السلام عليكم ورحمة الله وبركاتهبسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلينأريد كود قائمة ازراراي عند الضغط مثلا على زر تظهر قائمةبانتظاركم وشكرا
وعليكم السلام
اتفضل
- الكود:
<style type="text/css">
/* Remove dark-nav class from nav tag to see the light version */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
font-family: Sans-serif;
}
body {
font-size: 14px;
}
header {
height: 100vh;
}
.nav {
background-color: #f8f8f8;
border-bottom: 1px solid #ececec;
min-height: 50px;
height: auto;
/* Start menu */
}
.nav .container {
width: 1170px;
margin: auto;
}
.nav .container:after, .nav .container:before {
content: "";
display: block;
clear: both;
}
.nav .nav-heading {
float: left;
}
.nav .nav-heading .toggle-nav {
padding: 2px 10px;
border-radius: 5px;
border: none;
display: none;
background-color: transparent;
}
.nav .nav-heading > a {
text-decoration: none;
color: #000;
line-height: 60px;
font-weight: 400;
font-size: 19px;
font-weight: 300;
}
.nav .menu {
float: right;
}
.nav .menu:after {
content: "";
clear: both;
display: block;
}
.nav .list {
float: right;
margin: 0;
}
.nav .list > li {
float: left;
list-style: none;
}
.nav .list > li > a {
color: #555;
text-decoration: none;
display: block;
line-height: 60px;
padding: 0 10px;
}
.nav .list > li > a:hover,
.nav .list > li > a .nav .list > li.active > a {
color: #333;
}
.nav .list .categories .drop-down {
list-style: none;
position: absolute;
top: 100%;
left: 0;
background-color: #FFF;
border: 1px solid #ccc;
padding: 5px 0;
min-width: 160px;
width: auto;
white-space: nowrap;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
display: none;
z-index: 99999;
}
.nav .list .drop-down > .seprator {
height: 1px;
width: 100%;
margin: 9px 0;
background-color: #e5e5e5;
}
.nav .categories {
position: relative;
}
.drop-down > li > a {
color: #333;
display: block;
padding: 3px 20px;
text-decoration: none;
}
.show {
display: block !important;
}
/* Sub dropdown menu */
.categories .drop-down .sub-drop-down {
position: relative;
}
.categories .drop-down .sub-drop-down:hover .sub-dropdown {
display: block;
}
.categories .drop-down .sub-dropdown {
position: absolute;
top: -20px;
left: 107%;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 10px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
display: none;
}
.categories .drop-down .sub-dropdown:before {
content: "";
display: block;
position: absolute;
top: 20px;
left: -20px;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cccccc;
}
.categories .drop-down .sub-dropdown > li > a {
color: #555;
padding: 5px 0;
display: block;
}
/* End sub dropdown menu */
/* Dark theme */
.dark-nav {
background-color: #2f3340;
}
.dark-nav .list > li > a {
color: #BBB;
}
.dark-nav .list > li > a:hover,
.dark-nav .list > li.active > a {
color: #FFF;
}
.dark-nav .nav-heading > a {
color: #EEE;
}
.dark-nav .nav-heading .toggle-nav {
color: #EEE;
}
/* End Dark theme */
/* Start media query for navbar */
@media (max-width: 767px) {
.nav .container {
padding-right: 0;
padding-left: 0;
}
.nav .nav-heading {
width: 100%;
padding-left: 15px;
padding-right: 15px;
border-bottom: 1px solid #e7e7e7;
}
.nav .nav-heading .brand {
float: left;
}
.nav .nav-heading .toggle-nav {
display: block;
float: right;
margin-top: 14px;
}
.nav .menu {
width: 100%;
padding-left: 15px;
padding-right: 15px;
display: none;
}
.nav .list {
float: none;
width: 100%;
}
.nav .list > li {
float: none;
width: 100%;
}
.nav .list > li > a {
padding: 12px 0;
line-height: 1;
}
.nav .list .categories .drop-down {
background-color: transparent;
border: none;
position: static;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
}
.categories .drop-down .sub-dropdown {
position: static;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
padding-left: 20px;
}
.categories .drop-down .sub-dropdown > li > a {
color: #888;
}
.categories .drop-down .sub-dropdown:before {
display: none;
}
/* Simple reset for dark theme */
.dark-nav .menu {
background-color: #252831;
}
.dark-nav .nav-heading {
border-bottom-color: #31343c;
}
.dark-nav .list .drop-down > li > a {
color: #AAA;
}
.dark-nav .list .categories .drop-down .seprator {
background-color: #2a2d38;
}
}
</style>
<script type="text/javascript">
$(function () {
'use strict';
// Add class active when the user clicks the lis of the menu
$('.nav .list li').on('click', 'a', function () {
$(this).parent().addClass('active').siblings().removeClass('active');
});
var openCategories = $('.nav #open-categories'),
categories = $('.drop-down');
// Toggle categories on clicking
openCategories.on('click', function () {
$("#" + $(this).data('dropdown')).toggleClass('show');
// When the user clicks the window if the categories is not the target, close it.
$(window).on('mouseup', function (e) {
if ( categories.hasClass('show')
&& ! categories.is(e.target)
&& categories.has(e.target).length === 0
&& ! openCategories.is(e.target) ) {
categories.removeClass('show');
}
});
});
// Toggle menu, This will be shown in Extra small screens only
$('.nav .toggle-nav').on('click', function () {
$( "#" + $(this).data('toggle') ).slideToggle(300);
});
});
</script>
<nav class="nav">
<div class="container">
<div class="nav-heading">
<button class="toggle-nav" data-toggle="open-navbar1"><i class="fa fa-align-right"></i></button>
<a class="brand" href="#">اسم موقعك</a>
</div>
<div class="menu" id="open-navbar1">
<ul class="list">
<li><a href="#">رابط</a></li>
<li class="categories"><a href="#" id="open-categories" data-dropdown="target" href="#">قائمه<i class="fa fa-caret-down"></i></a>
<ul class="drop-down" id="target">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li class="sub-drop-down"><a href="#">قائمه</a>
<ul class="sub-dropdown">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li class="speprator"></li>
<li><a href="#">رابط</a></li>
</ul>
</li>
<li class="seprator"></li>
<li><a href="#">رابط</a></li>
<li class="seprator"></li>
<li><a href="#">رابط</a></li>
</ul>
</li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">الرئيسيه</a></li>
</ul>
</div>
</div>
</nav>
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: كود قائمة الازرار
الطائرالحر كتب:⊱Queen⊰ كتب:السلام عليكم ورحمة الله وبركاتهبسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلينأريد كود قائمة ازراراي عند الضغط مثلا على زر تظهر قائمةبانتظاركم وشكرا
وعليكم السلام
اتفضل
- الكود:
<style type="text/css">
/* Remove dark-nav class from nav tag to see the light version */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
font-family: Sans-serif;
}
body {
font-size: 14px;
}
header {
height: 100vh;
}
.nav {
background-color: #f8f8f8;
border-bottom: 1px solid #ececec;
min-height: 50px;
height: auto;
/* Start menu */
}
.nav .container {
width: 1170px;
margin: auto;
}
.nav .container:after, .nav .container:before {
content: "";
display: block;
clear: both;
}
.nav .nav-heading {
float: left;
}
.nav .nav-heading .toggle-nav {
padding: 2px 10px;
border-radius: 5px;
border: none;
display: none;
background-color: transparent;
}
.nav .nav-heading > a {
text-decoration: none;
color: #000;
line-height: 60px;
font-weight: 400;
font-size: 19px;
font-weight: 300;
}
.nav .menu {
float: right;
}
.nav .menu:after {
content: "";
clear: both;
display: block;
}
.nav .list {
float: right;
margin: 0;
}
.nav .list > li {
float: left;
list-style: none;
}
.nav .list > li > a {
color: #555;
text-decoration: none;
display: block;
line-height: 60px;
padding: 0 10px;
}
.nav .list > li > a:hover,
.nav .list > li > a .nav .list > li.active > a {
color: #333;
}
.nav .list .categories .drop-down {
list-style: none;
position: absolute;
top: 100%;
left: 0;
background-color: #FFF;
border: 1px solid #ccc;
padding: 5px 0;
min-width: 160px;
width: auto;
white-space: nowrap;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
display: none;
z-index: 99999;
}
.nav .list .drop-down > .seprator {
height: 1px;
width: 100%;
margin: 9px 0;
background-color: #e5e5e5;
}
.nav .categories {
position: relative;
}
.drop-down > li > a {
color: #333;
display: block;
padding: 3px 20px;
text-decoration: none;
}
.show {
display: block !important;
}
/* Sub dropdown menu */
.categories .drop-down .sub-drop-down {
position: relative;
}
.categories .drop-down .sub-drop-down:hover .sub-dropdown {
display: block;
}
.categories .drop-down .sub-dropdown {
position: absolute;
top: -20px;
left: 107%;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 10px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
display: none;
}
.categories .drop-down .sub-dropdown:before {
content: "";
display: block;
position: absolute;
top: 20px;
left: -20px;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cccccc;
}
.categories .drop-down .sub-dropdown > li > a {
color: #555;
padding: 5px 0;
display: block;
}
/* End sub dropdown menu */
/* Dark theme */
.dark-nav {
background-color: #2f3340;
}
.dark-nav .list > li > a {
color: #BBB;
}
.dark-nav .list > li > a:hover,
.dark-nav .list > li.active > a {
color: #FFF;
}
.dark-nav .nav-heading > a {
color: #EEE;
}
.dark-nav .nav-heading .toggle-nav {
color: #EEE;
}
/* End Dark theme */
/* Start media query for navbar */
@media (max-width: 767px) {
.nav .container {
padding-right: 0;
padding-left: 0;
}
.nav .nav-heading {
width: 100%;
padding-left: 15px;
padding-right: 15px;
border-bottom: 1px solid #e7e7e7;
}
.nav .nav-heading .brand {
float: left;
}
.nav .nav-heading .toggle-nav {
display: block;
float: right;
margin-top: 14px;
}
.nav .menu {
width: 100%;
padding-left: 15px;
padding-right: 15px;
display: none;
}
.nav .list {
float: none;
width: 100%;
}
.nav .list > li {
float: none;
width: 100%;
}
.nav .list > li > a {
padding: 12px 0;
line-height: 1;
}
.nav .list .categories .drop-down {
background-color: transparent;
border: none;
position: static;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
}
.categories .drop-down .sub-dropdown {
position: static;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
padding-left: 20px;
}
.categories .drop-down .sub-dropdown > li > a {
color: #888;
}
.categories .drop-down .sub-dropdown:before {
display: none;
}
/* Simple reset for dark theme */
.dark-nav .menu {
background-color: #252831;
}
.dark-nav .nav-heading {
border-bottom-color: #31343c;
}
.dark-nav .list .drop-down > li > a {
color: #AAA;
}
.dark-nav .list .categories .drop-down .seprator {
background-color: #2a2d38;
}
}
</style>
<script type="text/javascript">
$(function () {
'use strict';
// Add class active when the user clicks the lis of the menu
$('.nav .list li').on('click', 'a', function () {
$(this).parent().addClass('active').siblings().removeClass('active');
});
var openCategories = $('.nav #open-categories'),
categories = $('.drop-down');
// Toggle categories on clicking
openCategories.on('click', function () {
$("#" + $(this).data('dropdown')).toggleClass('show');
// When the user clicks the window if the categories is not the target, close it.
$(window).on('mouseup', function (e) {
if ( categories.hasClass('show')
&& ! categories.is(e.target)
&& categories.has(e.target).length === 0
&& ! openCategories.is(e.target) ) {
categories.removeClass('show');
}
});
});
// Toggle menu, This will be shown in Extra small screens only
$('.nav .toggle-nav').on('click', function () {
$( "#" + $(this).data('toggle') ).slideToggle(300);
});
});
</script>
<nav class="nav">
<div class="container">
<div class="nav-heading">
<button class="toggle-nav" data-toggle="open-navbar1"><i class="fa fa-align-right"></i></button>
<a class="brand" href="#">اسم موقعك</a>
</div>
<div class="menu" id="open-navbar1">
<ul class="list">
<li><a href="#">رابط</a></li>
<li class="categories"><a href="#" id="open-categories" data-dropdown="target" href="#">قائمه<i class="fa fa-caret-down"></i></a>
<ul class="drop-down" id="target">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li class="sub-drop-down"><a href="#">قائمه</a>
<ul class="sub-dropdown">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li class="speprator"></li>
<li><a href="#">رابط</a></li>
</ul>
</li>
<li class="seprator"></li>
<li><a href="#">رابط</a></li>
<li class="seprator"></li>
<li><a href="#">رابط</a></li>
</ul>
</li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
<li><a href="#">الرئيسيه</a></li>
</ul>
</div>
</div>
</nav>
شكرا
رد: كود قائمة الازرار
مر على الموضوع اسبوع تقريباً , هذه يعني ان الموضوع تم حلة او أهملت من صاحب المشكلة رجاء في حال كانت لديك المشكلة مستمر او اي استفسار اخر قم بفتح موضوع جديد سيتم غلق الموضوع & يرسل الى الأرشيف
|
![كود قائمة الازرار Sig_se10](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![-](https://i.servimg.com/u/f37/19/43/18/14/tabs_l11.gif)
» طلب كود الازرار
» ابي اجعل قائمة الاعضاء قائمة وليس افقية
» طلب كود الازرار
» الازرار
» عدم عمل كود الازرار ..
» ابي اجعل قائمة الاعضاء قائمة وليس افقية
» طلب كود الازرار
» الازرار
» عدم عمل كود الازرار ..
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى