Сайдинг сайта сверху и нажмите на страницу вниз

Мне нужна помощь, пожалуйста.Сайдинг сайта сверху и нажмите на страницу вниз

Я пытаюсь создать меню, которое подталкивает страницу вниз при нажатии и отображает конкретное подменю.

Меню должно быть выше страницы с высотой 50 пикселей. Если я использую высоту, содержимое не будет нажато.

Когда я нажимаю на первую ссылку, я должен получить подменю для этой ссылки. Если я нажимаю вторую ссылку, первое подменю должно быть заменено вторым набором ссылок подменю.

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

jQuery(document).ready(function(){ 
    jQuery(".menu-item-has-children").click(function(){ 
     jQuery(this).children(".sub-menu").slideToggle(); 
    }); 
});

Благодарим вас за все время.

https://jsfiddle.net/tjkr6L08/

источник

2017-02-22 Kal-El

Посмотрите на https://jsfiddle.net/tjkr6L08/1/

Javascript

jQuery(document).ready(function() { 
    jQuery(".menu-item-has-children").click(function() { 

    jQuery(".opened").slideUp().removeClass("opened"); 
    jQuery(this).children(".sub-menu").slideToggle().addClass("opened"); 

    }); 
});

CSS

.sub-menu { 
    display: none; 
    position:absolute; 
    top:40px; 
    left:0; 
    right:0; 
}

Так что ваш вопрос 50% CSS, 50% JavaScript. Вы хотите сделать ссылку на ранее открытое подменю, чтобы его можно было закрыть. Для правильного выравнивания объектов меню может быть абсолютным;

Таким образом, это самое быстрое решение - возможно, не самое лучшее, но даст вам представление о том, как действовать.

источник

2017-02-22 15:17:42 nbo

спасибо за быстрый ответ, но я получаю более запутанным Теперь. –

вы можете использовать загрузочный класс коллапса вместо тумблера в Java Script один раз увидеть документацию загрузчика Collapse

.menu-menu-top-container { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: static; 
 
    height: 50px; 
 
} 
 

 
.menu-top li { 
 
    display: inline-block; 
 
    padding:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="menu-top"> 
 
    <div class="menu-menu-top-container"> 
 
    <ul id="menu-menu-top" class="menu"> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Companie">Companie</a> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Cariere"> Cariere</a> 
 
     <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="contact/index.html">Contact</a></li> 
 
\t </ul> 
 

 
    <div id="Companie" class="collapse"> 
 
     <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="Cariere" class="collapse"> 
 
    <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa Copy</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

источник

2017-02-22 15:30:22

Если я удаляю высоту: 50 пикселей, он просто подталкивает меню. И как я могу закрыть подменю, когда я снова нажимаю ссылку из меню, или если я нажму другую ссылку, вы должны заменить его подменю. –

есть ли способ сделать это без бутстрапа? это похоже на простой код, и я не могу разобраться с ним. –

Сайдинг сайта сверху и нажмите на страницу вниз

ответ

Смежные вопросы