給導航欄前的圖標鏈接

對不起，如果我的標題是錯誤的，我不能想到這個問題的好標題。我想要在導航欄前放一個小圖標，以便訪問者可以通過單擊該圖標進入另一個站點。所以，我試圖在我的導航欄上課前給出這個圖標。這樣做，我發現，沒有任何環節可以給課前。給導航欄前的圖標鏈接

那麼，有沒有辦法做到這一點，因爲它從JS或通過改變一些樣式，它將是非常有用的，如果它可以。

you can view what i meant from this link

 <nav class="navbar navbar-blend navbar-default"> 
     <div class="navbar-header pull-left"> 

        <a class="navbar-brand" href="http://upper.dev/suisse-japon-final/suissejapon110216/" rel="home" title=" Schweizerisch-Japanische Gesellschaft – www.swiss-japan.ch"> 
        <img src="http://2d6t692n0eb7333453op21it.wpengine.netdna-cdn.com/cym/wp-content/themes/30web/assets/img/logo.png" class="img-responsive showinbetween"></a> 
        </div> 
        <div class="navbar-header pull-right"> 
         <ul class="nav pull-left"> 
         <li class="dropdown pull-right"> 
         <div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="http://upper.dev/suisse-japon-final/suissejapon110216?lang=en">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div>       </li> 
         </ul> 
         <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
        </div> 

       <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> 
        <ul id="menu-menu-1" class="nav navbar-nav"> 
     <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/">Home</a></li> 
       <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155"> 
     <a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=140">About Us</a> 
      <ul class="sub-menu"> 
      <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=156">Activities</a> 

     </li> 
       <li id="menu-item-527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-527"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=234">Activities</a> 

     </li> 
      <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-231"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=51">Membership</a> 

      </li> 
      <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=41">Various</a></li> 
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=31">Links</a></li> 
       <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=25">Contact</a></li> 
        </ul>    
          </div> 

      </nav>

很抱歉的標誌和圖標其僅用於演示。

您可以看到導航欄和導航欄品牌圖片之間的小圖標，我想將鏈接指向該小圖標。

來源

2016-04-26 Sus Hill

沒有得到您的問題。你能否更具體一些？ –

你可以在兩個圖像中看到小圖標（在大視圖=在主菜單之前）（在小視圖=在語言選擇器之前）我想給這個圖標的鏈接 –

僞元素不是DOM的一部分，所以JS和jQuery可以給他們分配一個鏈接。您需要創建DOM元素並將其鏈接。 –

爲什麼在使用僞元素之前而不是元素？

<section id="nav-container"> 
<a class="nav-country" href="#yourlink"><i class="icon-country"></i></a> 
<nav id="main-nav">your navigation here</nav> 
</section>

來源

2016-04-26 07:34:39

這是一個好主意。謝謝 –

給導航欄前的圖標鏈接

回答

相關問題