ioniamichael

помощь в верстке.

Рекомендуемые сообщения

привет друзья,

Нужна ваша помощь в верстке.

В верхнем меню нужно добавить поиск следующим оброзом(как на картинке)

 

79cb5528ff6a.png

 

При нажатии на иконку поиск, выходит окошко в котором нужно вводить слово для поиска.(как на картинке)

 

2012c0f3f10e.png

 

+ в мобильной версии, показовать только иконку

 

77f8791236e4.png

 


пытался сделать следующим образом, но не получилось.

Я не силён в верстке, если кто сможет помочь буду очень презнателен.

 


<li class="dropdown"><a href="<?php echo $search; ?>" title="<?php echo $text_search; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_search; ?></span> <span class="caret"></span></a>

          <ul class="dropdown-menu dropdown-menu-right">

 <li><?php echo $search; ?><i class="fa fa-search"></i> <span class="hidden-xs hidden-sm hidden-md"></span></a></li>

         </ul>

 </li>

        </li>


Изменено пользователем ioniamichael

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Pascha    631

дам для примера код(на версию 1.5..., в 2... по аналогии или используйте возможности бутстрапа) - далее пилите сами, иначе это будет считаться "медвежьей услугой"

 

<li class="dropdown isearch"><b><i class="fa fa-search"></i></b>
 <ul class="list-isearch">
<li>
<div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
   </li>
</ul>
</li>

пример стилей 

 
.fa-search{
font-size: 22px; 
font-weight: 300; 
}
.list-isearch {
    position: absolute;
    top: 95%;
    z-index: 1000;
    display: none;
    float: left;
    width: 345px;
    padding: 5px 0;
    ;
    margin-top: 4px;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
li.isearch:hover > .list-isearch {
display: block
}


.list-isearch #search {
top: 98px;
left: 20px;
width: 217px;
z-index: 7;
}
.list-isearch .button-search {
    background: url("../image/search_icon.png") no-repeat;
    border: medium none;
    font-size: 0;
    height: 19px;
    letter-spacing: -5px;
    line-height: 0;
    position: absolute;
    right: 10px;
    text-indent: -9999px;
    top: 10px;
    width: 19px;
    cursor: pointer
}
.list-isearch .button-search:hover {
    background-position: 0 100%;
}
.list-isearch #search input {
border: solid 1px #d4d4d4;
    background: #FFFFFF;
    width: 300px;
    margin-left: 10px;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 5px;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я лучше заплачу, а то испорчу что нибудь ;)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
shoputils    225

Ушло в платный раздел

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу