Jump to content
Sign in to follow this  
ioniamichael

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

Recommended Posts

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

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

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

 

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>


Edited by ioniamichael

Share this post


Link to post
Share on other sites

дам для примера код(на версию 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;
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.