Question

我必须在导航栏中显示更改为搜索栏的搜索图标的转换。我正在使用Phonegap制作混合应用程序。 [app in development]

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Visualize</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <nav class="bar bar-nav">
          <i class="glyphicon glyphicon-search" ></i>
          <i class="fa fa-align-justify" style="font-size:24px" ></i>

</header>
    </head>
    <body>

        <div class="app">
            <h1></h1>

            <div id="deviceready" class="blink">
                <p class="event listening"></p>
                <p class="event received"></p>

            </div>
        </div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
        <nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">Home</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-person"></span>
    <span class="tab-label">Profile</span>
  </a>
  <a class="tab-item" id="vbook1" href="#">
    <i class="fa fa-play-circle-o" style="font-size:50px"></i>
    <i class="tab-label" style="font-size:11px;">xyyx</i>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-star-filled"></span>
    <span class="tab-label">Favorites</span>
  </a>


  <a class="tab-item" href="#">
    <span class="icon icon-gear"></span>
    <span class="tab-label">Settings</span>
  </a>
</nav>

    </body>
</html>

css code

<nav class="bar bar-nav">
          <i class="glyphicon glyphicon-search" ></i>
          <i class="fa fa-align-justify" style="font-size:24px" ></i>
.glyphicon-search {

    position: absolute;
    left:321px;
    height:0px;
    font-size: 20px;
    margin-top: 13px;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;

    font-family: inherit;
    -webkit-backface-visibility: hidden;
}

.fa-align-justify{
    position: absolute;
  margin-top: 12px;
  font-size: 50px;
  right: 330px;
}

这是我的HTML和CSS代码。我有一个带两个按钮的导航栏。搜索按钮和用于打开左侧面板的按钮。

如何显示从搜索图标到搜索栏的转换？

0 个答案: