如何将 Google 自定义搜索插入导航菜单 'CentralizedMenu'

Question

我的第一个post，如有不妥请见谅，谢谢。

我想在“Ali Shtarbanov 的菜单栏/centralizedMenu”中添加一个“Google 自定义搜索”框，位于最后一项 'About' 的右侧和 3 栏图标的左侧它在监视器屏幕较小时创建 - 此菜单将在较小的屏幕上折叠/调整为三个栏。我正在使用 html，没有 php。

当我添加 Google 代码时，只是创建了一个空的 space，没有搜索框。这是我添加的 Google 功能代码的示例：

    <script>
    (function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx’;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>

他的 menuBar.html 上的代码，输出如下： http://jsbin.com/cotewaxemi/edit?html,output 并粘贴在这里：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>MenuBar</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
                <span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
                    <ul class="dropdown-menu">
                        <li><a href="#">Item1</a></li>
                        <li><a href="#">Item2</a></li>
                        <li><a href="#">Item3</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">AnotherItem</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Header:</li>
                        <li><a href="#">MoreItems</a></li>
                        <li><a href="#">MoreItems</a></li>
                        <li><a href="#">MoreItems</a></li>
                    </ul>
                </li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>  
<!-- JavaScript is required for the dropdown menu -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>

再次感谢您，克里斯蒂娜 P.S。我想把 link 放入我尝试做的事情中，但由于我是新成员，它说我不允许这么多 link。

Answer 1

首先，您的代码中有错字。问题在于收盘价。只需更改线路即可。

var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx’;

到

var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx';

其次，如果您想按照您的描述进行操作，则需要做一些工作。您必须将 <gcse:search></gcse:search> 放入 HTML.

的某个位置

但是，您不希望在 about 之后立即将其作为列表项 <li>，因为在较小的屏幕上查看时，整个菜单会折叠起来。所以我推荐的是用 ID 创建一个新的 <div> 并在 </button>.

之后把它放在 <div class="navbar-header"> 里面

剩下的只是css。如果您有使用 CSS 的经验，那将不是问题。

IMPORTANT NOTICE : Please try first, and where you're stuck, we may gladly help. Just show us how you've come so far. There is a snippet tool when you post a question, where you can paste JS , CSS, and HTML with external library support such as Jquery and Bootstrap. Don't hesitate to use it,

Answer 2

这是工作版本。

NOTE : If you can not see the whole menu, click full-page on top right of the panel.

// Make sure in jsFiddle you have selected option onLoad
(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
    <!-- Bootstrap core JavaScript-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
                    <span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
                        <ul class="dropdown-menu">
                            <li><a href="#">Item1</a></li>
                            <li><a href="#">Item2</a></li>
                            <li><a href="#">Item3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">AnotherItem</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Header:</li>
                            <li><a href="#">MoreItems</a></li>
                            <li><a href="#">MoreItems</a></li>
                            <li><a href="#">MoreItems</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">About</a></li>
                  <li id="gsrc"><a data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </a></li>
                  <li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav> 
    <!-- JavaScript is required for the dropdown menu -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery -->

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Google Search</h4>
      </div>
      <div class="modal-body">
        <gcse:search></gcse:search>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

如何将 Google 自定义搜索插入导航菜单 'CentralizedMenu'

How to insert Google Custom Search into Navigation Menu 'CentralizedMenu'

html

jquery

menubar