0
У меня есть блог - http://www.blankesque.com.Добавление панели поиска в навигационную панель
Я хочу включить панель поиска с нависшей навигационной панелью, поэтому по существу панель поиска будет отделена от панели навигации. В идеале я бы хотел, чтобы панель поиска появлялась с правой стороны после всех вкладок/страниц. У меня есть требуемое html-кодирование для строки поиска и ее сопроводительной кодировки css, но я не понимаю, как мне следует собирать код для строки поиска с кодировкой для панели навигации. Ниже я включил кодирование всей панели навигации.
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
</ul></li>
<li class='social'><a href='#'>Follow</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:[email protected]'>Email</a></li>
</ul></li>
<li><a href='#'>Categories</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
</ul>
</li>
<li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li>
<li><a href='#'>Search</a>
<div id='search' title='Type and hit enter'> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/> </form> </div>
<br/><br/> </li>
</ul>
<div id='dptuh'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</div></div>
<style>
#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:35px;
display:block;
padding: 0;
margin-left: -16px;
z-index:100;
top:0px;
left:0px;
position:fixed;
background:#ffffff;
opacity: 0.8;
filter: alpha(opacity=80);
}
#wctopdropnav{ /* social */
float: right;
width:97%;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:10px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10px;
background:#ffffff;
color: #000000;
width: 88px;
margin: 0;
padding: 0 1px;
line-height: 20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:22px 0 0 0;
padding: 4px 0 0 0;
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#dptuh {
color: #000000;
text-transform: uppercase;
font-family: cantarell;
font-size: 14px!important;
display: block;
letter-spacing: 0.13em;
text-decoration: none;
margin: 0.9%;
}
#dptuh a {
font-weight: normal;
}
#dptuh a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
.social li:last-of-type{
margin: 2px 1px 0 0!important;
border-top:1px solid #e0e0e0;
display: block;
}
.social li {
padding-left: 2px!important;
}
#search {
border: 1px solid #cccccc;
background: white url(http://i.picresize.com/images/2015/07/27/bO1L.jpg) 98% 50% no-repeat;
text-align: center;
padding: 4% 0 4% 0;
width: 100%;
height: 16px; mouse:pointer:
}
#search #s {
background: none;
color: #333333;
font: cantarell 10px;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
letter-spacing: 0.09em;
border: 0;
width: 10%;
padding: 0;
margin: 0;
outline: none;
}
</style>
Я был бы очень признателен, если бы кто-нибудь мог помочь мне в этом вопросе. Заранее спасибо.
Ирам