[3.8.x] Grey Impression Drop Down Menu

10-17-2010, 01:18 PM

И так я заморачивался с тем как как мне сделать доп новигацию для своего форума для размещения панели линков чтобы было удобно мне и моим пользователям.В итоге нарыл сайт с сорсами менюшек на CSS и сделал адаптацию,так как не не жадный человек выкладываю способ установки на на vB 3.8.х:
открыть шаблон navbar(Я использовал дефолтный стиль там тег переноса был я под него вставлял в самом начале)
и вставляем в самое начало код:

PHP Code:


			
<div>

<ul class="menu">

    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

    <li class="top"><a href="#" class="top_link"><span>Sample Menu This some</span></a>

        <ul class="sub">

            <li><a href="#">Sample Menu This some</a></li>            

            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>

        </ul>

    </li>

    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

        <ul class="sub">

            <li><a href="#">Sample Menu This is some longer text</a></li>            

            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>

        </ul>

    </li>

    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>

</div>

после этого открываем общие свойства шаблона и в окошко Дополнительные определения CSS дописываем CSS самого меню:

PHP Code:


			
.bg {background: url(images/menu/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/menu/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/menu/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(images/menu/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(images/menu/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(images/menu/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(images/menu/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(images/menu/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(images/menu/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul, 

.menu :hover ul ul, 

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#999999 url(images/menu/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

и сохраняем,в аттече архив с картинками заливаем его в папку images чтобы картинки грузились так images/menu/ картинка и переходим на сайт,должно получиться так:

Click image for larger version

Name: image001.jpg
Views: 155
Size: 34.7 KB
ID: 21791

Скачать архив:

Quote:

source(2).zip

ЗЫ в архиве надодяться все исходники,я только переименовал папку и в css файле расставил свои пути

10-18-2010, 10:03 PM

как установить менюшки по середине?

10-19-2010, 08:40 AM

Quote:

Originally Posted by iropko

как установить менюшки по середине?

В CSS этой менюшки, есть параметры - float:left
Попробуй дать центрирование, вместо этого — center.
Либо взять дивы в такой же тэг <center> — будет прощe по моему.

10-19-2010, 12:15 PM

Quote:

Originally Posted by kadetvb

В CSS этой менюшки, есть параметры - float:left
Попробуй дать центрирование, вместо этого — center.
Либо взять дивы в такой же тэг <center> — будет прощe по моему.

пробовал, не получается((

10-19-2010, 10:58 PM

попробуй пиксели подвинуть