|
Сделать поиск для верхнего меню сайта
|
|
rekersil |
Понедельник, 06 Февраля 2017, 16:50 | Сообщение 1 |
|
Нужно сделать красивый поиск для верхнего меню сайта.Самому в голову ничего не лезит.Какое бы вы поставили поиск под это меню?
css:
Код
.wraper {
width: 950px;
position: relative;
margin: 0 auto;
}
.header {
width: 950px;
height: 50px;
background: #292929;
}
.hc-logo {
position: absolute;
width: 160px;
height: 50px;
margin-left: 75px;
}
.hc-logo:hover {
opacity: 0.9;
}
.icon {
background: url("images/logo-header.png");
position: absolute;
width: 100%;
height: 100%;
}
.header-menu {
display: inline-block;
margin-left: 250px;
}
.header-menu li {
display: inline-block;
margin: 0 10px;
font-size: 16px;
font-weight: bold;
}
.header-menu-list a{
color: white;
text-decoration: none;
}
.header-menu-list a:hover{
color: #e9e9e9;
}
.search{
color: #B6B6B6;
}
.search:focus{
background-color: #e9e9e9;
}
html
Код <!DOCTYPE html> <html> <head> <title>HomeCinema - Твой домашний кинотеатр!</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class="wraper"> <div class="header"> <div class="hc-logo"> <a href="http://homecinema.ucoz.org/"> <i class="icon"></i> </a> </div> <div class="header-menu"> <ul class="header-menu-list"> <li> <a href="http://homecinema.ucoz.org/"> Главная <a> </li> <li> <a href="/"> Новинки </a> </li> <li> <a href="/"> Стол заказов </a> </li> <li> <a href="/"> Помощь </a> </li> </ul> </div> <input type="text" value="Поиск" class="search" name="search" onblur="if(this.value=='') this.value='Поиск';" onfocus="if(this.value=='Поиск') this.value='';"> </div> </div> </body> </html>
Добавлено (06.02.2017, 16:50)
---------------------------------------------
Цитата rekersil (  ) Какое
Какой
|
| [ UA ] |
|
|
Alkapone |
Понедельник, 06 Февраля 2017, 17:26 | Сообщение 2 |
|
Код поиска т.е там где он будет
Код <div class="h_top h_container"> <div class="h_top_inside"> <div class="h_search"><form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/"><input name="q" maxlength="150" class="inputsearch loadsearch" placeholder="Введите слово для поиска"><input type="submit" name="sfSbm" value="Найти" class="novis"><input type="hidden" name="a" value="2"></form></div>
Вид материалов поиска
Код <div class="h_block hb_mtr"> <h4 class="hb_title"><a href="$ENTRY_URL$" class="entryLink"> $TITLE$ </a></h4> <div class="h_mtr"> <div class="hm_left"><a href="$IMG_URL$" onclick="return hs.expand(this)"><img src="$IMG_URL$" title="Кликните, чтобы увеличить" alt=" $TITLE$ "></a></div> <div class="hm_right"> <div class="hc_table"> <div class="hc_tr"> <div class="hc_td"> <div class="h_details"> <span class="catalog" id="cat1" title="Категория">$ENTRY_DEPTH$</span> </div> </div></div> <div class="hc_tr"> <div class="hc_td hm_text"> $MESSAGE$</div> </div> </div> </div> </div> </div>
Страница поиска
Код <!DOCTYPE html> <html> <head> <title><?if($SEARCH_QUERY$)?>$SEARCH_QUERY$ - <?endif?>Поиск</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="StyleSheet" href="/css/common.css" /> <link type="text/css" rel="stylesheet" href="/css/checkboxes.css" /> <script type="text/javascript" src="/js/highslide.js" /></script> </head> <body> <header> $GLOBAL_AHEADER$ </header> <div class="container"> <!--content--> <div class="h_wrapper"> <div class="h_content"> <!-- <body> --> <div class="h_block"> <div class="h_block_content"> <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="searchtable"> <tbody><tr><td nowrap="nowrap"><input type="text" name="q" maxlength="30" style="width: 86%; margin-right: 5px" size="30" value="$SEARCH_QUERY$" class="queryField"> <div class="wrap-but rad2"><input type="submit" class="searchSbmFl button rad-lt2 rad-lb2 rad-rt2 rad-rb2 sb" id="sfSbm" value="Найти"></div></td><td style="padding: 0px 5px; display: none;" nowrap="nowrap"><div><span class="aSchBrc1" style="display: none;">[</span><a href="javascript://" rel="nofollow" onclick="_uMenu.show('sFltLst');return false;" style="display: none;">Расширенный поиск</a><span class="aSchBrc2" style="display: none;">]</span><div id="sFltLst" style="padding-top:2px;display:none;position:absolute;z-index:99;width:200px;"><div class="xw-tl"><div class="xw-tr"><div class="xw-tc xw-tsps"></div></div></div><div class="xw-ml"><div class="xw-mr"><div class="xw-mc" style="height:130px;overflow:auto;"><div class="myWinCont"><div style="margin:3px"><div style="padding:0 0 2px 0;margin:0;"><input style="height:16px;width:16px;" id="smdload" type="checkbox" name="m" value="load" checked=""> <label for="smdload">Социальные сети</label></div></div></div></div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div></div></div><script type="text/javascript">new _uMenu('sFltLst');</script></td></tr></tbody></table> <input type="hidden" name="t" value="0"> </form> <script type="text/javascript"> $(".aSchBrc1").hide(); $(".aSchBrc1").next().hide(); $(".aSchBrc2").hide(); $(".aSchBrc1").parent() $(".aSchBrc1").parent().parent().parent().parent().parent().attr("width", "100%"); $(".aSchBrc1").parent().parent().parent().parent().parent().attr("class", "searchtable"); $("table.searchtable tbody tr td:last").hide(); $("table.searchtable tbody tr td:first input.queryField").attr("style", "width: 86%; margin-right: 5px"); $("input.searchSbmFl").addClass("button rad-lt2 rad-lb2 rad-rt2 rad-rb2 sb"); $("input.searchSbmFl").wrap("<div class='wrap-but rad2'></div>"); </script> </div> </div> $BODY$ <?if($PAGE_SELECTOR1$)?><div class="h_pages" id="numpages-138">$PAGE_SELECTOR1$</div><?endif?> <!-- </body> --> </div> <div class="h_sidebar"> $GLOBAL_SIDEBAR$ </div> </div> <!--/content--> </div> <footer> $GLOBAL_BFOOTER$ </footer> </body> </html>
Поиск не активен 
Поиск активен 
[img]https://iplogger.com/1mjwq7[/img]
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 17:56 | Сообщение 3 |
|
|
Alkapone, Спасибо
|
| [ UA ] |
|
|
Alkapone |
Понедельник, 06 Февраля 2017, 18:21 | Сообщение 4 |
|
|
rekersil, Если вдруг не подойдет, то, пиши другой дам)
[img]https://iplogger.com/1mjwq7[/img]
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 19:24 | Сообщение 5 |
|
|
Alkapone, А какие еще есть варианты?
|
| [ UA ] |
|
|
Alkapone |
Понедельник, 06 Февраля 2017, 19:51 | Сообщение 6 |
|
|
rekersil, Есть такой вариант НАЖМИ НА МЕНЯ
И есть такой вариант НАЖМИ НА МЕНЯ
[img]https://iplogger.com/1mjwq7[/img]
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 20:00 | Сообщение 7 |
|
|
Alkapone, А ты в CSS разбираешься?
|
| [ UA ] |
|
|
Kosten |
Понедельник, 06 Февраля 2017, 20:26 | Сообщение 8 |
|
Alkapone, на втором поиске нужно класс выставить, чтоб при наведение палец показывал, где то давно так делал, но видать все черновики слил.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 06 Февраля 2017, 20:28 | Сообщение 9 |
|
|
Цитата rekersil ( ) Alkapone, А ты в CSS разбираешься?
А что со стилями у вас?
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 20:48 | Сообщение 10 |
|
|
Kosten, При включении бордера,появляется серая полоса.
Не знаете,как ее можно убрать?Добавлено (06.02.2017, 20:48)
---------------------------------------------
Цитата rekersil ( ) бордера
Бордер-радиуса
|
| [ UA ] |
|
|
Kosten |
Понедельник, 06 Февраля 2017, 21:02 | Сообщение 11 |
|
|
rekersil, можно сайт увидеть, где материал стоит.
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 21:10 | Сообщение 12 |
|
|
Kosten,это я в текстовом документе пока делаю.
css
Код .wraper {
width: 950px;
position: relative;
margin: 0 auto;
}
.header {
width: 950px;
height: 50px;
background: #292929;
}
.hc-logo {
position: absolute;
width: 160px;
height: 50px;
margin-left: 75px;
}
.hc-logo:hover {
opacity: 0.9;
}
.icon {
background: url("images/logo-header.png");
position: absolute;
width: 100%;
height: 100%;
}
.header-menu {
display: inline-block;
margin-left: 250px;
}
.header-menu li {
display: inline-block;
margin: 0 10px;
font-size: 16px;
font-weight: bold;
}
.header-menu-list a{
color: white;
text-decoration: none;
}
.header-menu-list a:hover{
color: #e9e9e9;
}
.search{
color: #B6B6B6;
height: 20px;
width: 239px;
margin: 0 0 0 17px
}
.search:focus{
background-color: #e9e9e9;
}
html
Код <!DOCTYPE html> <html> <head> <title>HomeCinema - Твой домашний кинотеатр!</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class="wraper"> <div class="header"> <div class="hc-logo"> <a href="http://homecinema.ucoz.org/"> <i class="icon"></i> </a> </div> <div class="header-menu"> <ul class="header-menu-list"> <li> <a href="http://homecinema.ucoz.org/"> Главная <a> </li> <li> <a href="/"> Новинки </a> </li> <li> <a href="/"> Стол заказов </a> </li> <li> <a href="/"> Помощь </a> </li> </ul> </div> <input type="text" value="Поиск" class="search" name="search" onblur="if(this.value=='') this.value='Поиск';" onfocus="if(this.value=='Поиск') this.value='';"> </div> </div> </body> </html> Добавлено (06.02.2017, 21:10)
---------------------------------------------
Если к класу .search добавить бордер-радиус то появляется серая полоса
|
| [ UA ] |
|
|
Alkapone |
Понедельник, 06 Февраля 2017, 21:52 | Сообщение 13 |
|
|
Код tbody
{
border-top:0 none;
}
Точно так же только для класса search и должно прокатить. Этот код чисто для примера.
[img]https://iplogger.com/1mjwq7[/img]
|
| [ RU ] |
|
|
rekersil |
Понедельник, 06 Февраля 2017, 22:04 | Сообщение 14 |
|
|
Alkapone, Всё работает.Спасибо
|
| [ UA ] |
|
|
Сопрано |
Понедельник, 06 Февраля 2017, 22:18 | Сообщение 15 |
|
rekersil, можешь стиль тени поставить и сам его настроить.
Код box-shadow: 0px 5px 20px 0px rgba(101, 101, 101, 0.57);
Вот пример, зайди на любой файл на каталоге файлов и посмотри.
|
| [ RU ] |
|
|
