<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

      蟬知系統導航欄子導航如何橫向排列

      2016-08-01 10:47:00
      GavinHsueh
      原創
      10815
      摘要:導航對于一個站點來說起著至關重要的作用,通過導航條可以提高用戶體驗,迅速找到目標內容,同時對于搜索引擎而言有利于抓取網站子頁面內容。但有時我們為了導航條的美觀,需要對其多一些調整

      導航對于一個站點來說起著至關重要的作用,通過導航條可以提高用戶體驗,迅速找到目標內容,同時對于搜索引擎而言有利于抓取網站子頁面內容。但有時我們為了導航條的美觀,需要對其多一些調整,下面我們來分享下 蟬知 企業建站系統的導航條如何設置子菜單橫向顯示:

      方法一:調整默認CSS樣式:

      在設計--代碼管理---全部頁面---CSS中加入下列代碼:


      .dropdown-menu li{
          float:left;
      }
      .dropdown-menu{
          min-width:500px;
      }
      
      看下效果:


      方法2:自定義區塊

      我們也可以根據自己的需求自定義一個導航區塊,比如我們新建一個自定義區塊,HTML,CSS,JS代碼分別下:

      HTML:


      <script type="text/javascript" src="images/jquery.js"></script>
      <div class="container"><div style="clear:both;display:block;padding-bottom:20px;"><ul id="topnav"><li><a href="">Home</a></li>
      <li><a href="">About</a> <span> <a href="">The Company</a> | <a href="">The Team</a> | <a href="">Careers</a> </span> </li>
      <li><a href="">Services</a> <span> <a href="">What We Do</a> | <a href="">Our Process</a> | <a href="">Testimonials</a> </span> </li>
      <li><a href="">Portfolio</a> <span> <a href="">Web Design</a> | <a href="">Development</a> | <a href="">Identity</a> | <a href="">SEO &amp; Internet Marketing</a> | <a href="">Print Design</a> </span> </li>
      <li><a href="">Contact</a></li>
      </ul>
      </div>
      </div>
      CSS:



      #blockID{
          margin:0px !important;
          padding:0px !important;
      }
      #blockID .panel-body,#blockID .container{
          padding-left:0px !important;
          padding-right:0px !important;
      }
      body {
      	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
      	margin: 0;
      	padding: 0;
      }
      .container {margin: 0 auto;}
      ul#topnav {
      	margin: 0; padding: 0;
      	float: left;
      	width: 100%;
      	list-style: none;
      	position: relative;
      	font-size: 1.2em;
      	background-color:black;
      }
      ul#topnav li {
      	float: left;
      	margin: 0; padding: 0;
      	border-right: 1px solid #555;
      }
      ul#topnav li a {
      	padding: 10px 15px;
      	display: block;
      	color: #f0f0f0;
      	text-decoration: none;
      }
      ul#topnav li:hover { background-color:blue;}
      ul#topnav li span {
          z-index:999;
      	float: left;
      	padding: 15px 0;
      	position: absolute;
      	left: 0; top:35px;
      	display: none;
      	width: 100%; background: #1376c9;
      	color: #fff;
      	-moz-border-radius-bottomright: 5px;
      	-khtml-border-radius-bottomright: 5px;
      	-webkit-border-bottom-right-radius: 5px;
      	-moz-border-radius-bottomleft: 5px;
      	-khtml-border-radius-bottomleft: 5px;
      	-webkit-border-bottom-left-radius: 5px;
      }
      ul#topnav li:hover span { display: block; }
      ul#topnav li span a { display: inline; }
      ul#topnav li span a:hover {text-decoration: underline;}
      JS:



      $(document).ready(function() {
      	
      $("ul#topnav li").hover(function() { //Hover over event on list item
      	$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
      	$(this).find("span").show(); //Show the subnav
      } , function() { //on hover out...
      	$(this).css({ 'background' : 'none'}); //Ditch the background
      	$(this).find("span").hide(); //Hide the subnav
      });
      	
      });
      
      然后布局到全部頁面的頁頭即可,同時將網站頭部區塊的下欄設為不顯示,即去除蟬知自帶的導航欄。我們來看下效果:


      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>