JQuery бар аккордеона түрінде сайт үшін Тік мәзірі

Өздеріңіз білетіндей мәзірі, - сайттың ажырамас бөлігі. Қызықты шарлау онлайн ресурс пайыздық келушілер алады. Сонымен қатар, кез келген мәзір маңызды меншік - оның ықшамдылық. оңай HTML және CSS пайдаланып жасалған қарапайым тік мәзірі. Бірақ біз одан әрі баруға: берсін бізге JQuery көмегімен menu- «баян» жасауға үйренеді.

а menu- «баян» жасау

аккордеон түріндегі тік меню дегеніміз не? Бұл ашылмалы тізім, шарлау оңай жасайды және стильді сайты береді табылады. Осы жолмен жүзеге Мәзір, сіз тармақшаларында көп қосуға мүмкіндік береді. оларға қол жеткізу, сіз қажетті элементті тышқанмен кезде орын алады. Біреулер ол JQuery қолданбай осы сән қарапайым мәзірін жасауға болады деп айтуға мүмкін. Иә, бұл болып табылады. Бірақ бұл нысан смартфондарда немесе планшеттерде иелеріне өте пайдалы болар еді. ның барлық тартымды, тік мәзір жасау болсын. Содан кейін, бір шарлауды сәндеу түсін өзгерту, ол кез келген сайтқа дизайн реттеуге болады.

HTML коды

Сондықтан, біздің тік мәзір жасау үшін, алдымен келесі жолдарды қамтитын болады, ол HTML-кодын теру керек:

Accord_menu.html деп аталатын файлда осы кодты сақтаңыз.

Өздеріңіз көріп отырғандай, біз Таңбаланған тізім құрдық. Ол 3 негізгі ұпай тұрады:

- фотосурет;

- фильмдер;

- кітаптар.

Әрбір элемент бірнеше тармақтарды бар. Қайда, сіз сілтемелер қосу # қажет етіледі. Қазір бұл стиль сипаттау үшін маңызды болып табылады. Ол сіздің барлық Интернет-ресурстың көрініс байланысты. сайт үшін Тік мәзірі оның дизайны үйлесімді біріктіруге тиіс.

CSS-код

стильдер, сіз қиын емес болуы керек. Біз бұл мысалда Градиент пайдаланады ғана атап. Мұнда CSS-код:

түсті CSS-файлда көрсетілген, мөлшері маркерлер сол жақтағы тізімнен элементтердің жойылады. Ол сізге бұл меңзегенде әрбір элементтің және қосалқы мәзірден өзін қалай анықталады. Мысалыға:

# E1fee2 - бұл бозғылт жасыл түс тармақшасына.

Егер сіз оларға орнатылуға # C4f0f7 -golubovaty көлеңке тармақшасына.

Дисплей меншік қажетті шегініс және өлшемін реттеу үшін блок мәні сұраңыз. түсі, өлшемі, шрифт түрі, орналасқан жері - бәрі CSS файлында сипаттау болып табылады. Мысалы, accordionmenu_my1.css, деп атайды.

айдағыштарды мәзірі жақсарту қосу

Егер сіз, біздің мақсат кетейік - тік мәзір JQuery құру. Егер сіз осы технологиясымен таныс болмасаңыз, алаңдамаңыз. Біз Google репозиторийін пайдалануға және JQuery сценарийін қосыңыз. Бұл неғұрлым тартымды мәзірі жасайды. айдағыштарды Hypertext Markup HTML және JavaScript өзара іс-қимыл негізінде JavaScript кітапхана болып табылады. айдағыштарды сіз элементтердің мазмұны мен төлсипаттарын қол жеткізуге мүмкіндік береді.

Сондықтан, HTML-файлының органға қажетті сценарий қосуға және Шабыс элементтерін қоспағанда 2 айнымалы, сақтау ережелерін орнатыңыз. тінтуірдің бар, ол бойынша бір ашылуында Басқа қойындыларын жапсаңыз, код ықпал етеді. Міне, бұл көрінеді әдісі:

барлық өзгерістерді сақтау, ол браузер мәзірінде көрінеді. Яғни ортақ нәтижесі болып табылады: Нәтижесінде, біз олардың қалауына қарай, сіз әрқашан өзгерте аласыз тартымды мәзірін келді. Ал JQuery, CSS саласындағы жаңа білім алу, сіз өз шеберліктерін жетілдіру, сайттың бірегей элементтерін жасайды.