Показать сообщение отдельно
  #7 (permalink)  
Старый 23.12.2018, 14:36
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 79

Помогите. Я никак не могу понять как тут вставить развёртывание в зависимости от текущей страницы
<script type="text/javascript">
$(document).ready(function () {
    $('.sub > a').click(function(){
      $('.sub ul').slideUp();
       if ($(this).next().is(":visible")){
           $(this).next().slideUp();
       } else {
       $(this).next().slideToggle();
       }
      return false;
    });
       $('.mini-menu > ul > li > a').click(function(){
	   $('.mini-menu > ul > li > a, .sub a').removeClass('active');
	   $(this).addClass('active');
	}),
       $('.sub ul li a').click(function(){
	   $('.sub ul li a').removeClass('active');
	   $(this).addClass('active');
	});
});
</script>

<div class="mini-menu">
        <ul>
            <li>
                <a href="#">Главная</a>
            </li>
            <li class="sub">
                <a href="#">Пункт Меню - 1</a>
                <ul>
                   <li><a href="#">Ссылка - 1</a></li>
                   <li><a href="#">Ссылка - 2</a></li>
                   <li><a href="#">Ссылка - 3</a></li>
                   <li><a href="#">Ссылка - 4</a></li>
                   <li><a href="#">Ссылка - 5</a></li>
                   <li><a href="#">Ссылка - 6</a></li>
                   <li><a href="#">Ссылка - 7</a></li>
                   <li><a href="#">Ссылка - 8</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="#">Пункт Меню - 2</a>
                <ul>
                   <li><a href="#">Ссылка - 1</a></li>
                   <li><a href="#">Ссылка - 2</a></li>
                   <li><a href="#">Ссылка - 3</a></li>
                   <li><a href="#">Ссылка - 4</a></li>
                   <li><a href="#">Ссылка - 5</a></li>
                   <li><a href="#">Ссылка - 6</a></li>
                   <li><a href="#">Ссылка - 7</a></li>
                   <li><a href="#">Ссылка - 8</a></li>
                   <li><a href="#">Ссылка - 9</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="#">Пункт Меню - 3</a>
                <ul>
                    <li><a href="#">Ссылка - 1</a></li>
                    <li><a href="#">Ссылка - 2</a></li>
                    <li><a href="#">Ссылка - 3</a></li>
                    <li><a href="#">Ссылка - 4</a></li>
                    <li><a href="#">Ссылка - 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Контакты</a>
            </li>
        </ul>
    </div>

<style>



.mini-menu {
    margin: 0px auto;
    max-width: 220px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block;	
    outline: 0;	
    padding: .7em 1em;	
    text-decoration: none;	
    color:#C9C9C9;	
    font-weight: normal;	
    text-shadow: 1px 1px 3px #111;	
    background: #333;
    border-bottom: 1px solid #222;
    background-image:-webkit-linear-gradient(#444, #333);
    background-image:-moz-linear-gradient(#444, #333);
    background-image:-ms-linear-gradient(#444, #333);
    background-image:linear-gradient(#444, #333);
    -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
    color:#f2bd00;
}
.mini-menu .sub > ul {
    display: none;
    overflow: hidden;
    background: #eee;
    -webkit-box-shadow:inset 0 0 50px #bbb;
    -moz-box-shadow:inset 0 0 50px #bbb;
    box-shadow:inset 0 0 50px #bbb;
}
 
.mini-menu .sub > ul > li > a {
    color:#514b92;
    display: block;
    font-size: 12px;
    text-decoration: none;
    padding: .7em 1em;
    border-bottom: 1px dotted #bababa;
}
.mini-menu .sub > ul > li > a:hover,
.mini-menu .sub > ul > li > a.active {
    background: #d8d8d8;
    color: red;
    padding-left: 1.3em;
}
.mini-menu .sub > ul > li > a:after{
    content: "»";
    float: left;
    margin-right:6px;
    line-height: 12px;
}
.mini-menu .sub > a:before {
    content:'•';
    height:12px;
    width:12px;
    font-size: 1em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 12px;
    background: #333;
    line-height: .8em;
    color: red;
    text-indent: 0;
    text-align: center;
    text-shadow:none;
    font-weight: 500;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}
/* активный переключатель */
.mini-menu .sub > a.active:before{
    color: #f2bd00;
}
</style>
Ответить с цитированием