0
입력란을 입력란의 가장 오른쪽에 추가하려고했는데, 그 위치가 잘못되었거나 그 위치가 틀릴 때마다 입력란을 추가하려고했습니다. 이걸로 나를 도울 수 있니? 내 JS hide-on-scroll 기능 때문에 메뉴 막대에 있어야합니다. 나는 JQuery와 - UI의입력란의 메뉴 위치가 잘못되었습니다.
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML을 사용하려고 해요 :
<nav>
<span class="nadpis"><a href="javascript:history.go(0)" style="text-transform: uppercase;"><?php echo $id_dom; ?></a></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
<a href="#">PSI</a>
<ul>
<li>
<a href="flvmena/meno1.html">Simoncik</a>
</li>
<li>
<a href="flvmena/meno2.html">Kodrla</a>
</li>
<li>
<a href="flvmena/meno3.html">Vajs</a>
</li>
<li>
<a href="flvmena/meno4.html">Hrebicek</a>
</li>
<li>
<a href="flcmena/meno1.html">Bednarikova</a>
</li>
<li>
<a href="flcmena/meno2.html">Dobrikova</a>
</li>
<li>
<a href="flcmena/meno3.html">Duracka</a>
</li>
<li>
<a href="quamena/meno1.html">Klco</a>
</li>
<li>
<a href="quamena/meno2.html">Cisar</a>
</li>
</ul>
</li><!--
--><li class="druhe">
<a href="#">☰</a>
<ul>
<li>
<a href="index.php">RPO</a>
</li>
<li>
<a href="flv.php?id_dom=flv">FLV</a>
<ul>
<li>
<a href="flvmena/meno1.html">Simoncik</a>
</li>
<li>
<a href="flvmena/meno2.html">Kodrla</a>
</li>
<li>
<a href="flvmena/meno3.html">Vajs</a>
</li>
<li>
<a href="flvmena/meno4.html">Hrebicek</a>
</li>
</ul>
</li>
<li>
<a href="flv.php?id_dom=FLC">FLC</a>
<ul>
<li>
<a href="flcmena/meno1.html">Bednarikova</a>
</li>
<li>
<a href="flcmena/meno2.html">Dobrikova</a>
</li>
<li>
<a href="flcmena/meno3.html">Duracka</a>
</li>
</ul>
</li>
<li>
<a href="flv.php?id_dom=QUA">QUA</a>
<ul>
<li>
<a href="quamena/meno1.html">Klco</a>
</li>
<li>
<a href="quamena/meno2.html">Cisar</a>
</li>
</ul>
</li>
<li>
<a href="flv.php?id_dom=HFX">HFX</a>
</li>
<li>
<a href="flv.php?id_dom=PDT">PDT</a>
</li>
<li>
<a href="flv.php?id_dom=RSH">RSH</a>
</li>
<li>
<a href="flv.php?id_dom=BUR">BUR</a>
</li>
<li>
<a href="suhrn.php?id_dom=SUHRN" style="color: #ea9b54">SUHRN</a>
</li>
<li>
<a href="suhrn.php?id_dom=INCI" style="color: #ea9b54">INCI</a>
</li>
<li>
<a href="suhrn.php?id_dom=JIRA" style="color: #ea9b54">JIRA</a>
</li>
<li>
<a href="suhrn.php?id_dom=CHGT" style="color: #ea9b54">CHGT</a>
</li>
<li>
<a href="flv.php?id_dom=TASK" style="color: #ea9b54">TASK</a>
</li>
<li>
<a href="vrs.php" style="color: #ea9b54">VRS</a>
</li>
</ul>
</li>
</ul>
</nav>
CSS :
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}
[좋아요] (http://jsfiddle.net/10rcrrwa/1/)? –
아니요, 같은 줄에있는 메뉴 막대 옆에 있어야합니다. – Fred007
[이건 어때?] (http://jsfiddle.net/10rcrrwa/2/) –