• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Сделать поиск для верхнего меню сайта (Нужно сделать красивый поиск для меню.)
Сделать поиск для верхнего меню сайта
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Нужно сделать красивый поиск для верхнего меню сайта.Самому в голову ничего не лезит.Какое бы вы поставили поиск под это меню?

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 ()
Какое

Какой
Прикрепления: 2842829.png (4.7 Kb) · 3975053.png (2.6 Kb)
Страна: (UA)
Alkapone
 		Понедельник, 06 Февраля 2017 | Сообщение 2
Оффлайн
Vip
Сообщений:325
Награды: 5
« 115 »
Код поиска т.е там где он будет

Код
<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>


Поиск не активен

Поиск активен
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 3
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Alkapone, Спасибо
Страна: (UA)
Alkapone
 		Понедельник, 06 Февраля 2017 | Сообщение 4
Оффлайн
Vip
Сообщений:325
Награды: 5
« 115 »
rekersil, Если вдруг не подойдет, то, пиши другой дам)
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 5
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Alkapone, А какие еще есть варианты?
Страна: (UA)
Alkapone
 		Понедельник, 06 Февраля 2017 | Сообщение 6
Оффлайн
Vip
Сообщений:325
Награды: 5
« 115 »
rekersil, Есть такой вариант НАЖМИ НА МЕНЯ
И есть такой вариант НАЖМИ НА МЕНЯ
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 7
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Alkapone, А ты в CSS разбираешься?
Страна: (UA)
Kosten
 		Понедельник, 06 Февраля 2017 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 555 »
Alkapone, на втором поиске нужно класс выставить, чтоб при наведение палец показывал, где то давно так делал, но видать все черновики слил.
Страна: (RU)
Kosten
 		Понедельник, 06 Февраля 2017 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 555 »
Цитата rekersil ()
Alkapone, А ты в CSS разбираешься?

А что со стилями у вас?
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 10
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Kosten, При включении бордера,появляется серая полоса.
Не знаете,как ее можно убрать?

Добавлено (06.02.2017, 20:48)
---------------------------------------------

Цитата rekersil ()
бордера

Бордер-радиуса
Прикрепления: 2143407.png (72.0 Kb)
Страна: (UA)
Kosten
 		Понедельник, 06 Февраля 2017 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 555 »
rekersil, можно сайт увидеть, где материал стоит.
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 12
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
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 добавить бордер-радиус то появляется серая полоса

Прикрепления: 1673113.png (2.6 Kb)
Страна: (UA)
Alkapone
 		Понедельник, 06 Февраля 2017 | Сообщение 13
Оффлайн
Vip
Сообщений:325
Награды: 5
« 115 »
Код
tbody
{
border-top:0 none;
}


Точно так же только для класса search и должно прокатить. Этот код чисто для примера.
Страна: (RU)
rekersil
 		Понедельник, 06 Февраля 2017 | Сообщение 14
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Alkapone, Всё работает.Спасибо
Страна: (UA)
Сопрано
 		Понедельник, 06 Февраля 2017 | Сообщение 15
Оффлайн
Vip
Сообщений:462
Награды: 4
« 14 »
rekersil, можешь стиль тени поставить и сам его настроить.

Код
  box-shadow: 0px 5px 20px 0px rgba(101, 101, 101, 0.57);


Вот пример, зайди на любой файл на каталоге файлов и посмотри.
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Сделать поиск для верхнего меню сайта (Нужно сделать красивый поиск для меню.)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: