shal.kinostan.kz Промо сайтындағыдай меню жасаймыз (Javascript-сіз) (Велосипед)
Әдеттегідей сайттарды аралап отырып, shal.kinostan.kz/ сайтындағы менюге ерекше көзім түсті :)
Қайта Велосипед ойлап шығардым ощм
Сонымен қысқаша. body тегінің ішіне мына html кодтты жазамыз.
CSSте стильдерін жазамыз
Боооолды, бары осы. Түсінбегендерің пікірде сүрарсыңдар.
p\s: Internet Explorer браузерінде жасау жасамауы белгісіз, тексеріп көрген жоқпын.
Қайта Велосипед ойлап шығардым ощм
Сонымен қысқаша. body тегінің ішіне мына html кодтты жазамыз.
<div class="kiru">
<p>Кіру</p>
<ul>
<li>
<div class="text1">Басы</div>
<div class="text2">Басы</div>
</li>
<li>
<div class="text1">Фильм туралы</div>
<div class="text2">Фильм туралы</div>
</li>
<li>
<div class="text1">Постерлер</div>
<div class="text2">Постерлер</div>
</li>
<li>
<div class="text1">Жаңалықтар</div>
<div class="text2">Жаңалықтар</div>
</li>
</ul>
</div>CSSте стильдерін жазамыз
body {
margin: 0px;
padding: 0px;
}
.box {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 340px;
border: 1px solid #040505;
background-color: #3d3d3d;
font-family: Arial, sans-serif;
box-shadow: 0px 0px 30px #434343;
-webkit-box-shadow: 0px 0px 30px #434343;
-moz-box-shadow: 0px 0px 30px #434343;
cursor: pointer;
overflow: hidden;
transition: height 0.5s ease 0ms;
-webkit-transition: height 0.5s ease 0ms;
-moz-transition: height 0.5s ease 0ms;
-o-transition: height 0.5s ease 0ms;
}
.box p {
color: #bbbbbb;
text-transform: uppercase;
font-size: 50px;
margin: 21px 0px;
letter-spacing: 1px;
text-align: center;
text-shadow: 0 0 5px #000, 0 0 21px #9ab5da;
}
.box ul{
list-style: none;
margin: 0px;
padding: 0px;
}
.box li {
border-top: 1px solid #040505;
border-right: 1px solid #040505;
padding-left: 30px;
width: 139px;
height: 46px;
float: left;
color: #FFF;
text-shadow: 1px 1px 1px #000;
overflow: hidden;
background-color: #2f2f2f;
transition: background-color 0.5s ease 0ms;
-webkit-transition: background-color 0.5s ease 0ms;
-moz-transition: background-color 0.5s ease 0ms;
-o-transition: background-color 0.5s ease 0ms;
}
.box li .text1, .box li .text2 {
padding-top: 14px;
height: 32px;
}
.box li .text1 {
transition: margin-top 0.5s ease 0ms;
-webkit-transition: margin-top 0.5s ease 0ms;
-moz-transition: margin-top 0.5s ease 0ms;
-o-transition: margin-top 0.5s ease 0ms;
}
.box:hover {
height: 240px;
}
.box li:hover {
background-color: #65bab3;
}
.box li:hover .text1 {
margin-top: -46px;
}Боооолды, бары осы. Түсінбегендерің пікірде сүрарсыңдар.
Мысалды мына жерден қарай аласыңдар.
p\s: Internet Explorer браузерінде жасау жасамауы белгісіз, тексеріп көрген жоқпын.
116 пікір
Тегін хостингке сілтеме жасап жіберсеңіз, бағымды сынап жасап көрейін:)))
Ощм былай ғо мына кодтты көшіріп ал да, блокнотты ашып вставить ет, сосын сол құжатты index.html деген атпен сақта да, браузерде ашып көр. Түсінбесең Мына жерден қарап ал.
Видео, ім, ок келесіде еімде болсын
Өз сайтыңа вставить ет, қойғың келсе
әттең, смайликтерім жоқVERTRIGO
және
Denwer
мен вертригоны ұсынамын, жай қолданушыға ешқандай қиындығы жоқ, соған интернеттен дайын қаптаған HTML шаблондардың бірін сала сап соны түзетесіз. Олар index.html және соның қасында жатқан *.css файлдары.
index.html файлын түзеткенде менюдің орналасатын жерін анықтап алуыңыз керек алдымен
box-shadow (box-shadow-дың -webkit- және -moz- деген екі вендорный префиксі бар.
shadow ескі браузерлерде шықпайды.
Хостингке салу керек
мынаны тауып алдым сосын))
радмин іске аспай калды ма?)
Мәтсікіл імммм
Мынаумен шатастырып отырған шығарсың? Баскетболист Яо Мин
Былай ма? kempir.kinostan.kz