CSS: Как сделать "резиновое" меню на примере new-jquery?
Всем привет! Сразу скажу, что поиск не помог и в существующих шаблонах, не нашел шаблона с «резиновым» меню, чтобы подсмотреть. Выложил бы свои попытки, но не верстальщик (только учусь), по-этому думаю что мои варианты совсем неправильны, потому как все отказывались делать меню растягиваемым.
Насколько мне удалось понять, задача решается изменением этих строк:
Для удобства, те же строчки на trac.lsdev.ru.
Чего хочу добиться: Растягиваемого меню (Все, Коллективные, Персональные, Лента, Топ) чтобы тянулось, пропорционально блоку #content
Бьюсь второй день, буду благодарен за помощь!
Насколько мне удалось понять, задача решается изменением этих строк:
/* Navigation
-------------------- */
#nav { margin: 0 auto 15px; max-width: 1600px; min-width: 960px; background: url(../images/nav.png) no-repeat; position: relative; zoom: 1; }
#nav-inner { height: 92px; padding: 0 0 0 0; margin-left: 20px; background: url(../images/nav.png) 100% 0 no-repeat; overflow: hidden; zoom: 1; }
/* Menu */
#nav .menu { padding-bottom: 30px; float: left; font-size: 15px; margin: 11px 0 0 0; }
#nav .menu li { float: left; color: #51B038; padding: 3px 10px 4px 10px; margin-right: 5px; position: relative; }
#nav .menu li a.new { color: #390; }
#nav .menu li a { text-decoration: none; color: #838383; }
#nav .menu li a:hover { color: #333; }
#nav .menu li.active { position: relative; background: #fff; border-bottom: 1px solid #ddd; }
#nav .menu li.active a { color: #333; }
#nav .menu li.active:before { content: ""; position: absolute; bottom: -5px; left: 10px; width: 9px; height: 5px; background: url(../images/arrows.png) no-repeat; }
/* Sub-menu */
#nav .sub-menu { position: absolute; top: 35px; left: 0; width: 500px; font-size: 11px; }
#nav .sub-menu li { margin-right: 5px; line-height: 13px; padding: 3px 10px 5px 10px !important; border-radius: 12px; }
#nav .sub-menu li a { color: #777 !important; text-decoration: underline; }
#nav .sub-menu li a:hover { text-decoration: none !important; }
#nav .sub-menu li.active { background: #555; color: #fff; font-weight: bold; background: #83DC5F; box-shadow: 0 2px 0 #75C656 inset; }
#nav .sub-menu li.active a { color: #fff !important; text-decoration: none; }
#nav .sub-menu li.active:before { display: none; }
Для удобства, те же строчки на trac.lsdev.ru.
Чего хочу добиться: Растягиваемого меню (Все, Коллективные, Персональные, Лента, Топ) чтобы тянулось, пропорционально блоку #content
#content { width: 66.5%; float: left; margin-right: 1.5%; background: #fff; }
Бьюсь второй день, буду благодарен за помощь!
5 комментариев
width: 100%;
это нужно прописать у #nav