Bob

Меню сайта

2 posts in this topic

Здравствуйте ув. форумчане.

Помогите доделать меню для сайта, проблема с выпадающим меню. Не работает.

Кто понимает, очень прошу. второй день голову ломаю.

<div class="menu-01">
<ul>
<li><a onclick="ga('send', 'event', 'Menu', 'click', '1');" [category=3]class="active"[/category] href="">ПУНКТ №1</a></li>
<li><a onclick="ga('send', 'event', 'Menu', 'click', '2');" [category=2]class="active"[/category] href="">ПУНКТ №2</a></li> 
<li><a onclick="ga('send', 'event', 'Menu', 'click', '3');" [category=8]class="active"[/category] href="">ПУНКТ №3</a></li> 
<li><a onclick="ga('send', 'event', 'Menu', 'click', '4');" [category=4]class="active"[/category] href="">ПУНКТ №4</a></li>    
<li><a onclick="ga('send', 'event', 'Menu', 'click', '5');" [category=6]class="active"[/category] href="">ПУНКТ №5</a></li>    
</ul>
                <li class="lastsections">
        <a href="javascript://">ЕЩЁ<span class="caret"></span></a>
            <ul class="sections">
                <li><a onclick="ga('send', 'event', 'Разделы', 'click', '6');" href="">ПУНКТ №6</a></li>
                <li><a onclick="ga('send', 'event', 'Разделы', 'click', '7');" href="">ПУНКТ №7</a></li>
                <li><a onclick="ga('send', 'event', 'Разделы', 'click', '8');" href="">ПУНКТ №8</a></li>
                <li><a onclick="ga('send', 'event', 'Разделы', 'click', '9');" href="">ПУНКТ №9</a></li>
                <li><a onclick="ga('send', 'event', 'Разделы', 'click', '10');" href="">ПУНКТ №10</a></li>
            </ul>
	</li>
</div>
.menu-01                            { position: absolute; top: 10px; left: 80px; height: 30px; line-height: 30px; }
.menu-01 ul                            {}
.menu-01 li                            { float: left; margin: 0 20px 0 0; }
.menu-01 li a                        { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; text-decoration: none; }
.menu-01 li a.active                { color: #86D142; border-bottom: 3px solid #86D142; padding-bottom: 4px; }
.menu-01 li a:hover                    { color: #86D142; }

.menu-01 li.last a                    { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #fff; text-decoration: none; background-color: #d90000; padding: 1px 3px;

    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;}

.menu-01 li.last a:hover            { background-color: #b20000; }

.lastsections{
	position: absolute; top: 12px; right: -60px; height: 30px; line-height: 30px;
}
.lastsections:hover{
	background-color: #666;
}

.lastsections:hover a{
	color:#fff !important;
}

.sections {
  background-color: #666;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  left: 0;
  margin: 0;
  padding: 5px 5px 10px 15px;
  position: absolute;
  top: 30px;
  width: 115px;
  z-index: 1000; 
  display:none;
}
.sections li
{
    background-image: none !important;
    display: block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px 0 0 !important;
    width: 160px;
}	

.sections li a {
    color: #fff !important;
}
.sections li a:hover {
    color: #85A9C3 !important;
}
.sections ul li {
    line-height: 20px;
}
.sections a {
    color: #000;
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}

 

Share this post


Link to post
Share on other sites

должен быть еще js код 

 

<li class="lastsections">
        <a href="javascript://">ЕЩЁ<span class="caret"></span></a>

 

и лишка без уля это не правильно и ошибка может выводится 

Тут мне кажется проще на js написать выпадалку при событии onclick и просто добавить ссылку без li в конце первого ul

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.