Блог

Главная - Вопросы по программированию - Где мне объединить или добавить скрипт выпадающего меню в заголовок. Jsfiddle

Где мне объединить или добавить скрипт выпадающего меню в заголовок. Jsfiddle

#jquery #html #performance #css

#jquery #HTML #Производительность #css

Вопрос:

Я пытаюсь объединить 2 кода. Я нашел два кода, которые я ищу. Я действительно новичок в этом, поэтому, пожалуйста, поймите.

Это нижний колонтитул и фон верхнего колонтитула: http://jsfiddle.net/F6dez /

Это выпадающее меню:http://jsfiddle.net/Mrdel/Wxs5n/2 /

Это моя попытка объединить два: я пытался оставить ссылку, но это не позволяет мне оставлять более 2 ссылок :/

Вот код для меню:

HTML:

 <ul id="nav">

  <li>
    <a href="#">Music</a>
    <ul>
      <li><a href="#">New Tracks</a></li>
      <li><a href="#">Old Tunes</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Upcoming</a></li>
    </ul>
    </li>


    </ul>
  </li>
</ul>

И css:

 ul { list-style: none; padding: 0; margin: 0;}

/* Style */

a {
  color: #000;
 display: block;
 font-size: 14px;
 text-decoration: none;
 font-family: 'Open Sans', serif;
 }
 nav {
 width: 100%;
 height: 45px;
 }
 #nav ul li:hover,
 #nav > li:hover {
 background: #2e98d5;
 }
 #nav ul > li:hover > a,
#nav > li:hover > a {
 color: #fff;
 }
 #nav > li {
 float: left;
  position: relative;
  }
  #nav > li > a {
  padding: 13px 30px;
   height: 20px;
  }



#nav > li:hover ul {
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#nav ul {
 top: 46px;
width: 170px;
position: absolute;
background-color: #eee;
z-index: 1;
visibility: hidden;
-webkit-transition-property: visibility;
 -moz-transition-property: visibility;
 -o-transition-property: visibility;
 transition-property: visibility;

 -webkit-transition-duration: 0s;
 -moz-transition-duration: 0s;
 -o-transition-duration: .0s;
 transition-duration: 0s;

 -webkit-transition-delay: .25s;
 -moz-transition-delay: .25s;
 -o-transition-delay: .25s;
 transition-delay: .25s;
 }

/* The slide */
#nav li li a {
height: 0px;
padding: 0px 30px;
opacity: 0;
-webkit-transition-property: height, padding, opacity;
-moz-transition-property: height, padding, opacity;
-o-transition-property: height, padding, opacity;
transition-property: height, padding, opacity;

-webkit-transition-duration: .25s, .25s, .08s;
-moz-transition-duration: .25s, .25s, .08s;
-o-transition-duration: .25s, .25s, .08s;
 transition-duration: .25s, .25s, .08s;

-webkit-transition-delay: 0s, 0s, .05s;
 -moz-transition-delay: 0s, 0s, .05s;
 -o-transition-delay: 0s, 0s, .05s;
 transition-delay: 0s, 0s, .05s;
 }
 #nav li:hover li a {
 height: 20px;
  padding: 13px 30px;
 opacity: 1;
 }

Вот код для фона:

HTML:

 <!Doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
    <div class="container">
        <div class="header">
            This is header
        </div>
        <div class="content">
            <div class="gap"></div>
            <p>First line...............</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Long content goes here...</p>
            <p>Last line................</p>
            <div class="gap"></div>
        </div>
        <div class="footer">
            This is footer
        </div>
    </div>
</body>
</html>

И css:

  html {
 height:100%; 
 max-height:100%; 
 padding:0; 
 margin:0; 
 border:0;
 overflow: hidden; 
 }
 body {
 height:100%;
 max-height:100%;
 overflow:hidden;
 padding:0;
 margin:0;
 border:0
 font: 12px Verdana, Helvetica, sans-serif;
 color: #F3F3F3;
 }
 .container {
 width : 100%;
 height: 100%;
 max-height:100%;
 }
 .header {
 position:absolute;
 margin:0;
 top:0;
 display:block;
 width:100%;
 height:80px;
 z-index:5;
 background-color: #656565;
 text-align : center;
 right:18px;
 line-height: 80px;
 font-size:2em;
   }
 .footer {
 position:absolute;
 margin:0;
 bottom:-1px;
 display:block;
 width:100%;
 z-index:4;
 height : 80px;
 background-color: #656565;
 text-align : center;
 right:18px;
 line-height: 80px;
 font-size:2em;
 }
 .content {
 display:block;
 height:100%;
 max-height:100%;
 overflow:auto;
 position:relative;
 z-index:3;
 background-color: #909090;
 text-align : center;
 }
 .gap {height : 80px;}

Ответ №1:

Я не совсем уверен, что понимаю, что вы здесь ищете, поскольку это должно быть так же просто, как скопировать код меню:

 <ul id="nav">

  <li>
    <a href="#">Music</a>
    <ul>
      <li><a href="#">New Tracks</a></li>
      <li><a href="#">Old Tunes</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Upcoming</a></li>
    </ul>
  </li>
</ul>

и вставить его в контейнер head:
http://jsfiddle.net/LH5TC /