forum.okis.ru
http://forum.okis.ru/

Горизонтальное меню
http://forum.okis.ru/viewtopic.php?f=10&t=3957
Страница 1 из 1

Автор:  Vladislav [ 24 май 2013, 19:01 ]
Заголовок сообщения:  Горизонтальное меню

Привет всем,может кто помочь разобрать код,что бы Горизонтальное меню встало как следует под шапкой сайта. Не могу самостоятельно разобраться где в коде двигать местоположение меню.


Код:
#mainmenu{
    position:relative;
    background:#444444;
    height:30px;
    margin:20px 0;
    padding:0;
    float:left;
    width:100%;
    z-index:100 /* для отображения подпунктов поверх остальных блоков */
}
#mainmenu ul {
    clear:left;
    position:relative;
    right:50%;
    height:30px;
    float:right;
    text-align:center;
    font:15px Arial, Helvetica, sans-serif;
    list-style:none;
    padding:0;
    margin:0
}
#mainmenu ul li {
    position:relative;
    left:50%;
    float:left;
    height:30px;
    padding:0;
    margin:0
}
#mainmenu ul li a {
    border-left:1px solid #666;
    display:block;
    color: #fff;
    text-decoration: none;
    padding:5px 15px
}
#mainmenu ul li:first-child a {border:none}
 
#mainmenu ul li:hover a,
#mainmenu ul li.hover a,
#mainmenu ul li.active a {color:#fff}
 
#mainmenu ul li:hover,
#mainmenu ul li.hover,
#mainmenu ul li.active {background: #666}
 
/* Выпадающие пункты */
#mainmenu ul li ul {
    position:absolute;
    left:0;
    top:30px;
    font-size:12px;
    display:none;
    list-style:none;
    padding:0;
    margin:0;
    width:150px   
}
#mainmenu ul li ul li {
    background-color:#666;
    position:relative;
    left:0;
    display:list-item;
    float:none;
    height:auto;
    margin:0;
    text-align:left;
}
#mainmenu ul li ul li a {
    border-bottom:1px solid #999 !important;
    padding:6px 5px;
    border:none
}
#mainmenu ul li ul li:hover,
#mainmenu ul li ul li.hover {
    background-color:#444
}
#mainmenu ul li:hover ul,
#mainmenu ul li.hover ul{display:block}

Меню конечно не маленькое но по большей мере я разобрал его для будущих дел, а вот переместить в нужное место не знаю как, не могу понять,слишком много разной информации в и-нете на эту тему. Может кто-то сможет подсказать видя этот код,как можно было бы поступить ? Сайт: http://www.mediator-uk.okis.ru Спасибо..

Автор:  buy-aqua [ 24 май 2013, 19:28 ]
Заголовок сообщения:  Re: Горизонтальное меню

Вы разобрались, что какую то часть надо вставлять в меню Реклама, а какую в CSS.

И в самом конце код

Код:
#mainmenu{
position: absolute;
top:-70px;
left: 120px;
width:900px;
}


попробуйте)

Автор:  buy-aqua [ 24 май 2013, 19:32 ]
Заголовок сообщения:  Re: Горизонтальное меню

Как пример это меню:

ЭТО В CSS

Код:
#menu {padding:0; margin:0; list-style:none; width:700px; height:45px; position:absolute; top:150px; left:300px;}
#menu li {position:relative; float:left;}
#menu li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:Verdana, , sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(/img/mirzasteklom_ru/button-off.png);}
#menu li a b {position:relative; top:12px; font-weight:normal;}
* html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twelve/button-off.png', sizingMethod='scale');}


#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{background: url(/img/mirzasteklom_ru/button-on.png) no-repeat right top; cursor:pointer; color:#fff;}

* html #menu li a:hover,
* html #menu li a:active,
* html #menu li a:focus,
* html .home #menu li#home a,
* html .single #menu li#single a,
* html .dropdown #menu li#dropdown a,
* html .dropline #menu li#dropline a,
* html .flyout #menu li#flyout a,
* html .support #menu li#support a,
* html .contact #menu li#contact a
{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twelve/button-on.png', sizingMethod='scale');}

#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{cursor:pointer; top:8px; padding-right:3px;}

#menu{
position: absolute;
top:-70px;
left: 120px;
width:900px;
}


ЭТО В РАЗДЕЛ РЕКЛАМЫ (под меню сайта)

Код:
<ul id="menu">
         <li id="home" class="first"><a href="open.freedom-vrn.ru"><b>Главная</b></a></li>
         <li id="single"><a href="open.freedom-vrn.ru"><b>Новости</b></a></li>
         <li id="dropdown"><a href="open.freedom-vrn.ru"><b>Регистрация</b></a></li>
         <li id="dropline"><a href="open.freedom-vrn.ru"><b>Галерея</b></a></li>
         <li id="flyout"><a href="open.freedom-vrn.ru"><b>О нас</b></a></li>
         <li id="support"><a href="open.freedom-vrn.ru"><b>Карта сайта</b></a></li>
         <li id="contact" class="last"><a href="open.freedom-vrn.ru"><b>Контакты</b></a></li>
      </ul>

Автор:  Vladislav [ 24 май 2013, 21:21 ]
Заголовок сообщения:  Re: Горизонтальное меню

buy-aqua спасибо большое,я понял :)

Страница 1 из 1 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/