Пользовательский поиск Google мешает ссылкам внизу

Question

Я недавно добавил панель поиска Google на свой сайт. Как я обнаружил, что это блокирует навигацию внизу, даже когда поиск не активен. Если я поднимаю z-index навигации, он отображается поверх результатов поиска. Как сделать так, чтобы кнопки были «кликабельными», когда панель поиска не скатилась. Посмотреть страницу здесь http://etterengineering.com/SampleIndex.html

Вот мой HTML:

<div id="cse-search-form" style= "z-index:999999; top:0px;"></div>
<div id="cse-search-form" style="width: 100%;"></div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en', style : google.loader.themes.SHINY});
  google.setOnLoadCallback(function() {
    var customSearchControl = new      
google.search.CustomSearchControl('012677673255316824096:sean13fvlei');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
  }, true);
</script>
<div id="cse" style="width:43%; z-index:999997; top:40px; height:650px;"></div>

И мой CSS:

#cse-search-form {
    position:absolute; 
    z-index:999999; 
    width:270px; 
    left:680px;}
#cse{position:absolute; z-index:999997; left: 530px; 
overflow:auto;overflow-x:hidden; pointer-events:none;
    }
 #dropdown {      
  margin: 0;
  padding: 0;
  height: 1em;
  }
 #dropdown li {
  float: left;    
  list-style: none;
  }
 #dropdown li a {
  display: block;
  width:12em;     
  padding: 3px 0px;   
  background-color: transparent;      
  white-space:pre;    
  font-size:.8em;
  letter-spacing: -.4px;        
  text-align:center; 
  z-index: 24000;     
  font-family: Verdana;   
  color: #424242;
  position: relative; top:105px; left: 0px;   
  text-decoration: none; 
  }
  #dropdown li a:hover {color:#000000;}
  /* Sub Drop Down Organization */
  #dropdown li ul {
  display: none; 
  width: 18em;    
  letter-spacing:  1em;
  text-align:center;
  }
  /* Sub Drop down Hover */
  #dropdown li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0; 
  }
  #dropdown li:hover li a {
  word-spacing: .025em;       
  letter-spacing: -.05em;     
  font-size:.8em; 
  font-family: Verdana;   
  background: #6e6e6e; 
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF),    
  to(#ADADAD));
  background: -moz-linear-gradient(top,  #FFFFFF,  #ADADAD);
  }
  #dropdown li li a:hover {color:#ff0000;}

Answer 1

Я бы оставил это "cse" <div> скрытым до тех пор, пока оно не понадобится для отображения на экране.

edit - я не очень знаком с API Google, но мне даликод, который у вас уже есть, я думаю, вы бы сделали что-то вроде этого:

  $('#cse').hide();
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('012677673255316824096:sean13fvlei');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
    $('#cse').show();
  }, true);

Теперь его нужно снова скрыть при нажатии кнопки «Очистить».Я не могу найти в документации Google ничего о том, как настроить обратный вызов для этого (и на самом деле я не уверен, как кто-нибудь находит что-нибудь в этом беспорядке, который вызывает Google"Ссылка"), но вы просто захотите снова вызвать ".hide ()".