#css3 #css #html #javascript
у меня есть две сверстаные заготовки, в каждой из них есть то что нужно для готового
результата.
1- это первая заготовка 2- вторая
заготовка 3- желаемый результат если
он программно возможен
Не получается создать панель закладок в стиле гугл хром, у меня есть первая заготовка
которую я хочу внедрить на вторую но покуда что котелок не варит как это все можно
реализовать.
Проблема в том что первая заготовка загружается с картинок а вторая полностью на css3
в первой заготовки активность a:active первой и последней вкладки отмечены id="firstcurrent"
id="lastcurrent" все остальные id="current" во второй же заготовке таких заморочек
нету все гораздо проще и вот как их скрестить между собой и так что бы еще остались
плавные переходы с вкладки на вкладку во второй заготовке хз...
Ребят может кто подскажет у кого мозги по сильнее?
НАЧАЛО ПЕРВАЯ ЗАГОТОВКА
ВТОРАЯ ЗАГОТОВКА
Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor.
Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie
libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae
purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae.
Vivamus fringilla suscipit justo
Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio.
Donec dictum gravida feugiat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula
Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec
dolor tempor eleifend.
Phasellus non nibh
Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum
sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus
sed.
Duis pulvinar nibh vel urna
Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Donec accumsan ornare elit id imperdiet.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie
libero posuere et.
Cum sociis natoque penatibus
Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa
quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.
Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat
nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.
Imperdiet sem interdum nec
Mauris rhoncus tincidunt libero quis fringilla.
ВОТ МОИ ПОПЫТКИ, ТО ЧТО Я СМОГ СДЕЛАТЬ НО ОНО СЫРОВАТОЕ КАК ДАЛЬШЕ ДЕЛАТЬ НЕ ЗНАЮ
МОЖЕТ ДРУГОЙ ПУТЬ ВЫБРАТЬ
НАЧАЛО ПЕРВАЯ ЗАГОТОВКА
Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor.
Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie
libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae
purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae.
Vivamus fringilla suscipit justo
Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio.
Donec dictum gravida feugiat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula
Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec
dolor tempor eleifend.
Phasellus non nibh
Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum
sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus
sed.
Duis pulvinar nibh vel urna
Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Donec accumsan ornare elit id imperdiet.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie
libero posuere et.
Cum sociis natoque penatibus
Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa
quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.
Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat
nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.
Imperdiet sem interdum nec
Mauris rhoncus tincidunt libero quis fringilla.
Ответы
Ответ 1
По поводу первой заготовки. Замените id на классы. Т.е. должны получиться правила для: .headermenu ul li.first {...} .headermenu ul li.first a {...} .headermenu ul li.first.current {...} .headermenu ul li.first.current a {...} /* и т.д. для середины и конца */ затем можно поменять будет классы .first на :first-child и .last на :last-child, тогда в разметке не нужно будет классы проставлять вообще. Скрипт остается примерно тот же, просто после этого вам будет достаточно всего лишь ставить класс current для соответствующего
Комментариев нет:
Отправить комментарий