Jquery және CSSтің көмегімен қарапайым (drop down) ашылып-жабылатын меню

Programming Solutions /
Мен бұл постымда html, css және jquery көмегімен қалай қарапайым меню жасауға болатынын кһрсетелі отырмын. Бұл посттағы бес алты қатар кодтың көмегімен, өз сайттарыңызды көркемдей отырыңыздар.

Нәтижеде шығу керек болған менюдің суреті:


Қарапайым html код:

<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>


JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function()
{
// Бұл жердегі .account "My Accaount" сөзін қапсырып тұрған а тегінің класы.
var X=$(this).attr('id');
// X - "My Accaount" сөзін қапсырып тұрған а тегінің id-і.
if(X==1)
{
// Егер X-тің мәні 1-ге тең болса, submenu класы бар элементті жасырып, "My Accaount" сөзін қапсырып // тұрған а тегінің id-інің мәнін 0-ге теңейміз.
$(".submenu").hide();
$(this).attr('id', '0'); 
}
else
{
// Кері жағдайда submenu класы бар элементті көрсетіп, "My Accaount" сөзін қапсырып  тұрған а тегінің
// id-інің мәнін 1-ге теңейміз.
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>


CSS код
.dropdown 
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a 
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}


Көріп отырғаныңыздай код қарапайым. Мақала www.9lessons.info сайтынан ұрланды.
Кодтың скрипттерін жүктеу үшін сілтеме: demos.9lessons.info/url.php?url=https://www.box.com/s/f052bffcfcf6bd9c84f6
Демо: demos.9lessons.info/DropMenu/MyDemo.html

15 пікір

Abylai
жақсы аударма, әдемі меню, кодқа қатысты сұрақ, пікір айтсам орынсыз бола ма екен?
qwenchi
айта бер, шынымды айтсам кодтарына қараған да жоқпын. Қате болуы әбден мүмкін, болса түзей ғой
khairbek
маган кім түсіндереді СSS кодтың не екенің? сол кодты түсіну үшін неден бастау керек? алдын ала Рахмет
qwenchi
ru.html.net/tutorials/css/lesson1.php
Жігітпін дегендерің аударып осы сайтқа жазыңдар
ereke_enu
Картинкасыз әдемі меню жасауға бола ма өзі???
Abylai
кросбраузерныйлыққа бас қатырмаса неге жасалмасқа. керемет меню жасауға болады
ereke_enu
ия, кроссбраузерность деген тема тагы бар
Abylai
болашақ мінсіз болмаса да html5 css3 fullajax, web app кеңінен қолданылып, майкрософттың ИЕшек браузері жойылып кеткен жарқын болашаққа сенімім мол.
ereke_enu
)) Ол кезге дейін ешекте Тұлпарға айналып қалар
Abylai
ақтамаш
ereke_enu
басқа браузерді немен көшіріп аласың соны ойласай)))
Abylai
бұл мақтанарлықтай нәрсе емес еді негізі, дегенмен
ereke_enu
ия, ондай мұндай боп тұра береді ғо… Идеал ешкім жоқ деген сияқты. Майкрософт мықты браузер шығара алмайд дегенге сенбейм. Бұл жерде басқа бір тақырып бар секілді
ereke_enu
Не ғо, сайтқа не үшін кіргенім есіме түсіп жатыр.
Дизайн жасау философиясы, оның ішінде, сайттың дизайны жайлы бір-екі ауыз қарапайым нәрселерді жаза аласыңдар ма, прогер браттар???
Тек тіркелген қолданушылар ғана пікір қалдыра алады.