shal.kinostan.kz Промо сайтындағыдай меню жасаймыз (Javascript-сіз) (Велосипед)

Әдеттегідей сайттарды аралап отырып, shal.kinostan.kz/ сайтындағы менюге ерекше көзім түсті :)
Қайта Велосипед ойлап шығардым ощм



Сонымен қысқаша. 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 пікір

pari
мынаны қай сайтқа жасауға болады? Үйге тапсырма берсеңіз???
Abylai
кез келген сайтқа жасауға болады. Ок келесіде үй тапсырмасын жазармын
khairbek
емаааа маган неге жауап бермеске?
Abylai
жазып жатырмын бро
pari
үй тапсырмасын тез берсеңіз жақсы болар еді. Және айта кететінім, қай сайтқа жасаймыз? Мысалы, юкузға болама жасауға? Немесе сіз жасауға хостинг бересіз бе?
Abylai
:) юкозда сайт ашып көрмегесін, оны білмедім, css стильін жазатын жері болса стильді сол жерге жазасың, html кодтты html құжатқа жазасың. Хостингкке мысалы idhost-тың тегін хостингтері де жарай береді
pari
юкузда да css стильі бар:)))
Тегін хостингке сілтеме жасап жіберсеңіз, бағымды сынап жасап көрейін:)))
Abylai
алдымен компыңда жасап көрсеңщ. php емес, қарапайым html мен css қо
pari
жасап браузерде ашып едім қуып кеттіғо:)))
qyrmyzy
:) 404, бері кел:)
4o4
тындап турмын?)
qyrmyzy
на постқа жазшиш коммент
4o4
не деп?)) дайын шаблонның дайын css стилінің осында тұрғаны жайлы ма?))
Abylai
transition свойствосы жайл толығырақ мына жерде жазылған
khairbek
Салем достар ИИИИИИ таста дим салем достарын не? жаксы САЛАМ Абылай осы мына кодтарды кай жерге жазамыз?
4o4
css стильдерін сайтыңнын стильдерінің арасына қосасың, ал оның үстіндегі кодты менюді орнатқың келген жерге қосамыз
khairbek
CSS тин сайттарын кайдан алам,?
Abylai
стильді css файлға, не head тегіне style тегін жазып сосын ішіне стильдерді жазасың, html кодын body тегінің ішіне, өзің қойғың келген кез келген жерге жазасың
khairbek
Ф12 ни басып шыгарып аламба,? калай озы,? кезынде биологияны дурыс окымап едым!
Abylai
khairbek
Бырат мысалы Бір сайтты алам сол сайтты өзгерткым келет, енды жанагы коттарды кай жерге жазам, дегенымго, зараннее спасибо, хотябы видеосын саласызба?
Abylai
сайттың html файлын кез келген мәтіндік редакторда ашасың да мыналарды жоғарыда айтқан жерлерге жазып шығасың.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>shal.kinostan.kz Промо сайтындағыдай меню жасаймыз (Javascript-сіз)</title>
		<style>
			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;
			}
		</style>
	</head>
	
	<body>
    	<div class="box">
			<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>
				<li>
					<div class="text1">Постерлер</div>
					<div class="text2">Постерлер</div>
				</li>
				<li>
					<div class="text1">Жаңалықтар</div>
					<div class="text2">Жаңалықтар</div>
				</li>
			</ul>
		</div>
	</body>
</html>


Ощм былай ғо мына кодтты көшіріп ал да, блокнотты ашып вставить ет, сосын сол құжатты index.html деген атпен сақта да, браузерде ашып көр. Түсінбесең Мына жерден қарап ал.
Видео, ім, ок келесіде еімде болсын
khairbek
жарайт шыкты енды ары карай че делать етем
Abylai
енді осы кодттарды алдымен жүрегіңмен ұғынып ал :)
Өз сайтыңа вставить ет, қойғың келсе
qyrmyzy
:))))) әттең, смайликтерім жоқ
khairbek
баска сайттардан алмайсынба?
4o4
ф12нің не катысы бар?) сен біреудін интернет бетін шукылайын деп отырған жоқсын ғой бул жерде))
khairbek
мен тусынбейм го енды БЫРАТ, неден бастау креерк дегенымго
4o4
1zcxsd
Abylai
1zcxsd
тіпті не дерімді білмей, мынаны айтаберге 404 деген логинмен 1zcxsd деген парольмен кіріп көрдім
4o4
негізі ктрл ентер+басам деп толык емес текстті жіберіп алғам) соны ошіретін функция таппағасын амал жоқ… жарайды, енді күліп болсаңыз мына юзерге тусініктемемді бере кетуге рұқсат беріңіз)
khairbek
беребер айналып кетейн мен казр кыш боп келем
khairbek
sorry Bro!!! i want not
4o4
онай жолы.Егер сізде сайт болмаса және хостинг анау-мынау жағы киындық туғызса, бұларды тексеру үшін озіңізге локалды веб сервер ашып аласыз.
VERTRIGO
және
Denwer

мен вертригоны ұсынамын, жай қолданушыға ешқандай қиындығы жоқ, соған интернеттен дайын қаптаған HTML шаблондардың бірін сала сап соны түзетесіз. Олар index.html және соның қасында жатқан *.css файлдары.

index.html файлын түзеткенде менюдің орналасатын жерін анықтап алуыңыз керек алдымен
khairbek
раха!!! ары қарай айтпай ақ қой казр предахранительдер жанып кету мумкын))
pari
Абылай аға, компта жасадым қалай екен? МІНЕЕЕЕЕЕЕ
4o4
уахахахахах
khairbek
shadow ды калай салдын бырат,?
Abylai
text-shadow
box-shadow (box-shadow-дың -webkit- және -moz- деген екі вендорный префиксі бар.

shadow ескі браузерлерде шықпайды.
Abylai
:) өз компыңдағы кез келген файлға осылай сілтеме беру арқылы көрсете алатын болсаң C:/Users/Сагыныш/Desktop/ директориясын бір ақтарып шығар едім.
Хостингке салу керек
pari
СОНДА КОМПЫМДЫ АҚТАРЫП ОТЫРСЫЗБА ҚАЗІР?
Abylai
жоқ, норм бәрі. қорықпа
pari
C:/Users/Сагыныш/Desktop/
мынаны қайдан біліп қойдыңыз???
4o4
pari
не?
4o4
жай)))) компынды ішек карнын актарып карап отырмыз бәріміз,
User
Сағыныш мыналар сенің компыңа кіріп отыр манна сағат ақтөбе уақытымен 1 25 те компың 0,95 секундқа зависать етті.Сол сақтан.
pari
автомат пулеметпен сақтанып отырмын жау жағадан алып жатыр
4o4
ұқсамайт))) антивирусын неге ескіріп кеткен?))) жаңартпасан болмайды анауын, осылай кім көрінгенді компына кіргізе береді)))
User
тағы кіріватр, жана ғана агентте «Паридин компына киремиз айдааа!» деген жедел конференция ашылып, сенің айпиінді таратты.Компыңды сөндіріп тасташы кәзір
Abylai
Рабочий столыңда пао пао, нокия писисуит, фотошоп, торрент, фотосайптың ярлыктары бар ма еді?
Abylai
гта сан андерс ойнайсың?
User
Мама папа сурет тұр ғо ішінде.Локальный С да
pari
суретті осында шығаршиш? көрейік
pari
мынау айтаберде және фейзбугта бар. басқа суретті шығара аласыз ба?
qyrmyzy
мама папаны сураган сон осыны кошірдім. Отырайын енД сенің компынды актарып
pari
басқа суретті шығарш ал
4o4
агентті жап балақай)
ұжыссс шынымен кәдімгідей ақтарып отырсызбаааа
шыныңызды айтасыз ба апа
қорқып отырмын жәмән
pari
ұжсқоо мынау Қайырбектікіне де кіруге бола ма суретте тұр сілтеме
4o4

мынаны тауып алдым сосын))
pari
іііі мынауда бар фейзбугта неғоо рұқсатсыз шығара берме фотоларды
4o4
фейсбук актарып сенін суретінді іздеп журетін жанга уксайм ба?))))))))
Abylai
антивирус касперский екен іммм
Abylai
камтазия студио, ворд эксель, повер пойнт ярлыктары раб столда, файлзилла бар еще
MSHERIMBEK
муахахахаха, ерінбейсіңдер на:)))))))))))))) Айтқандай Загрузки папкасының ішін қараңдаршы, қызық көресіңдер:)))
Abylai
көп болса 3 минуттық видео табатын шығарсың ©
pari
ол не видео тағы не туралы? імммм…
User
Абылай теам вьювер) жасасын)
4o4

радмин іске аспай калды ма?)
User
Рабстобың мықты екен.Кірген жоқпын.

Мәтсікіл імммм
pari
Мәтсікіл імммм түсінбедім?
User
Жұмыс үстеліңді айтамында
pari
жұмыс үстеліңдегі фонда мотоциклдің суреті тұр дегенің бе?
pari
User
Браузерің пысынап жатыр ғой
Abylai
аха осылай
khairbek
khairbek
ал жаксы ал бір сабақ кетты енді нестим бұл индекспен?
Abylai
Хостингке салып, өз сайтыңды ашып алып, осы менюді қадасаң болады
qyrmyzy
фоныңдағы сурет:(((((((((
Abylai
не ғой, ұялып тұрм да негізі, анжақта shal.kinostan.kz/ сайтында да css3-те жазылыпты меню, jQuery-ма деп ойлап едім, енді байқадым. Мынаны өщіре салайын. Ұяттау болып қалды велосипедім, кешірім сұраймын.
pari
жаңылмайтын жақ, сүрінбейтін тұяқ болмайды ағасы! Барлығы нәрмәльні тұра берсін
khairbek
САЙТТЫН БЕТІН БЫЛАЙ ӨЗГЕРТЫП АЛДЫМ ЕНДЫ НЕСТЕЙМ?
Abylai
Обновить ет, отладчик арқылы өзгерту сенсаңия емес.
khairbek
деемек осылай сохранит етп коюга болат дейсызго жалпы?
Abylai
өз компыңда әрине
4o4
ктрл+шифт+делет және очистить ;)
qyrmyzy
басқа түс таппадың ба?
khairbek
сары қазақстаннын тусы
ereke_enu
Меню тамаша, бірақ, сайттың өзі біраз баяу жасай ма дим. Жабаскриптте инфо бірнеше бет ұшу керек қой
Manas
Осындай бірдеңелер жазып тұрсаңшы)))
rauan
pari… No comments…
User
Осы бетін жауып отырған адам кім еді.Баскетболист па.Осыны достарыма айтып едім ешкім сенген жоқ.Ақыры компқа барып фэйспалм баскетбол деп жазсам дым шықпайд.Тасым ай десейш.Айтшы бетін жауып отырған адам кім еді.Бір китаец па?
Abylai
Жоқ ол китаец емес, Бетін жауып отырған адам стар трек сериалындағы Жан-Люк Пикар (шатаспасам)

Мынаумен шатастырып отырған шығарсың? Баскетболист Яо Мин

ZevsKO
не деген қиын еді…
MSHERIMBEK
«Кемпір» көркемфильмі

Былай ма? kempir.kinostan.kz
onlasyn
CSS ті жақсы меңгерген екенсің. Көмек керек еді осы CSSтен
Abylai
Қандай көмек қажет, сұрай бер
Тек тіркелген қолданушылар ғана пікір қалдыра алады.