Резиновое меню, во всю ширину блока

(Ответов: 9, Просмотров: 14007)
  1. Студент
    • Регистрация: 03.05.2013
    • Сообщений: 41
    • Репутация: 5
    Здравствуйте, у меня следующая проблемка. Сайт _http://dota2cookies.u7870681.cp.regruhosting.ru/
    Мне необходимо растянуть меню на всю ширину блока 930px. Но не просто подгоном, а именно растянуть на всю ширину.

    Код меню


    <div class="top-menu">
    <div id='cssmenu'>
    <ul>
    <li class='active'><a href="'#"><span>ГЛАВНАЯ</span></a></li>
    <li class='has-sub'><a href="'#"><span>О ПРОЕКТЕ</span></a></li>
    <li class='has-sub'><a href="'#"><span>ПОДАТЬ ЗАЯВКУ</span></a></li>
    <li class='last'><a href='#'><span>ОТБОРОЧНЫЕ ЭТАПЫ</span></a>
    <ul>
    <li><a href='#'><span>ПЕРВЫЙ ЭТАП</span></a></li>
    <li><a href='#'><span>ВТОРОЙ ЭТАП</span></a></li>
    <li class='last'><a href='#'><span>ТРЕТИЙ ЭТАП</span></a></li>
    </ul>
    </li>
    <li class='last'><a href='#'><span>ВОПРОСЫ</span></a>
    <li class='last'><a href='#'><span>СОТРУДНИЧЕСТВО</span></a>
    </ul>
    </div>
    <div style="clear: both;"></div>
    </div>
    [свернуть]

    CSS код меню


    .top-menu{
    position: absolute;
    bottom: 0px;
    border-bottom: 6px solid #bf251c;
    width: 930px;
    }
    #cssmenu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    width: 930px;
    }
    #cssmenu ul {
    background: #1f1f1f;
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #cssmenu li {
    float: left;
    padding: 0px;
    }
    #cssmenu li a {
    background: #1f1f1f url('seperator.png') bottom right no-repeat;
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    }
    #cssmenu > ul > li > a {
    color: #cccccc;
    }
    #cssmenu ul ul a {
    color: #cccccc;
    }
    #cssmenu li > a:hover,
    #cssmenu ul li:hover > a {
    background: #bf241c url('hover.png') bottom center no-repeat;
    color: #FFFFFF;
    text-decoration: none;
    }
    #cssmenu li ul {
    background: #333333;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    width: 200px;
    z-index: 200;
    }
    #cssmenu li:hover ul {
    display: block;
    }
    #cssmenu li li {
    background: url('sub_sep.png') bottom left no-repeat;
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
    }
    #cssmenu li:hover li a {
    background: none;
    }
    #cssmenu li ul a {
    display: block;
    height: 35px;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
    }
    #cssmenu li ul a:hover,
    #cssmenu li ul li:hover > a {
    background: #bf241c url('hover_sub.png') center left no-repeat;
    border: 0px;
    color: #ffffff;
    text-decoration: none;
    }
    #cssmenu p {
    clear: left;
    }
    [свернуть]

    Код немного кривоват, так как пытался переделать, но как видите не очень. Надеюсь на вашу помощь)
    • 0
  2. ui-разработчик Аватар для kickboxer
    • Регистрация: 13.05.2011
    • Сообщений: 744
    • Репутация: 227
    • Webmoney BL: ?
    CSS код и разметку не обязательно сюда выкладывать, это не php.

    Код:
    #cssmenu li a {
    background: #1f1f1f url('seperator.png') bottom right no-repeat;
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 25px;
    padding: 0px 27px;
    text-align: center;
    text-decoration: none;
    }
    • 0
  3. Студент
    • Регистрация: 03.05.2013
    • Сообщений: 41
    • Репутация: 5
    kickboxer, спасибо, но это не то что я хотел, если я изменю название одного из пунктов, вновь придется править отступы. Необходимо следующее. К примеру если останется всего 3 пункта меню, то они должны автоматически растянуться по всей ширине блока, то есть, пункты должны быть резиновыми.
    • 0
  4. А компот??!!
    • Регистрация: 28.11.2011
    • Сообщений: 2,066
    • Репутация: 720
    • Webmoney BL: ?
    Цитата Сообщение от GreenBrick Посмотреть сообщение
    kickboxer, спасибо, но это не то что я хотел, если я изменю название одного из пунктов, вновь придется править отступы. Необходимо следующее. К примеру если останется всего 3 пункта меню, то они должны автоматически растянуться по всей ширине блока, то есть, пункты должны быть резиновыми.
    Пиши в icq 396706 помогу

    ---------- Сообщение добавлено 20:27 ---------- Предыдущее 19:53 ----------

    Если я правильно понял, .top-menu{ width:100%;

    a LI пропиши например: width:15%;
    • 0
  5. ui-разработчик Аватар для kickboxer
    • Регистрация: 13.05.2011
    • Сообщений: 744
    • Репутация: 227
    • Webmoney BL: ?
    Ну тогда вот написал скриптик (работает от 1 до 6 пунктов меню):
    Код:
    		<script type="text/javascript">
    			var countLi = $('#cssmenu>ul>li').length;
    			if (countLi == 1) {
    				$('#cssmenu>ul>li').css('width', '100%');
    			}
    			else if (countLi == 2) {
    				$('#cssmenu>ul>li').css('width', '50%');
    			}
    			else if (countLi == 3) {
    				$('#cssmenu>ul>li').css('width', '310px');
    			}
    			else if (countLi == 4) {
    				$('#cssmenu>ul>li').css('width', '25%');
    			}
    			else if (countLi == 5) {
    				$('#cssmenu>ul>li').css('width', '20%');
    			}
    			else if (countLi == 6) {
    				$('#cssmenu>ul>li').css('width', '155px');
    			}
    		</script>
    Но нужно тогда селектору #cssmenu li a обнулить падинги, ну или паддинги оставить, но тогда нужно будет посчитать на какое кол-во пикселей/процентов поделить каждый блок.
    Последний раз редактировалось kickboxer; 01.11.2013 в 01:39.
    • 0
  6. Студент Аватар для Kartograff
    • Регистрация: 22.09.2011
    • Сообщений: 71
    • Репутация: 19
    kickboxer, Ваш скрипт можно сократить до 3х строчек:)
    Код:
    <script type="text/javascript">
    	var countLi = $('#cssmenu>ul>li').length;
    	var widthLi = 930/countLi;
    	$('#cssmenu>ul>li').css('width', widthLi);
    </script>
    Или вообще до одной:
    Код:
    <script type="text/javascript">
            $('#cssmenu>ul>li').css('width', 930/$('#cssmenu>ul>li').length);
    </script>
    Просто писать столько условий в коде не очень красиво.
    • 3

    Спасибо сказали:

    GreenBrick(01.11.2013), kickboxer(01.11.2013), OlenaE(04.03.2014),
  7. ui-разработчик Аватар для kickboxer
    • Регистрация: 13.05.2011
    • Сообщений: 744
    • Репутация: 227
    • Webmoney BL: ?
    Kartograff, действительно)
    просто if - это первое, что в голову пришло)
    • 0
  8. Студент
    • Регистрация: 03.05.2013
    • Сообщений: 41
    • Репутация: 5
    kickboxer,Kartograff. Ребят похоже я что-то делаю не так, падинги обнулял, скрипт не подхватывается
    • 0
  9. ui-разработчик Аватар для kickboxer
    • Регистрация: 13.05.2011
    • Сообщений: 744
    • Репутация: 227
    • Webmoney BL: ?
    GreenBrick, совсем забыл сказать:
    скрипт нужно расположить ниже блока меню в коде (например, перед </body>), ну или обернуть скрипт в функцию
    Код:
    jQuery(document).ready(function() {
     сюда скрипт
    });
    и тогда он будет выполняться после загрузки страницы.
    • 2

    Спасибо сказали:

    GreenBrick(01.11.2013), Kartograff(01.11.2013),
  10. Студент
    • Регистрация: 03.05.2013
    • Сообщений: 41
    • Репутация: 5
    kickboxer, Kartograff. Ребятки, большое человеческое. Помогли! Проблема решена :)
    Последний раз редактировалось GreenBrick; 01.11.2013 в 13:01.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
DIV на всю ширину экрана
Web программирование 7 31.05.2013 13:56
Как определить ширину документа с прокруткой?
Web программирование 6 06.08.2012 15:10
Как сделать резиновое меню в Joomla ?
Joomla 3 18.04.2012 17:38
резиновое меню
Вопросы от новичков 0 15.04.2012 01:54
как задать ширину фона в % через CSS
Web программирование 4 28.04.2011 11:17

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры