goTOP
採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎,做下筆記。
▼電腦版介面
點擊在新視窗中瀏覽此圖片
▼手機版介面 (以ICON做區別)
點擊在新視窗中瀏覽此圖片
October 27, 2017
為了讓原本在 header 內的 Nav (Menu) 有自己的高度而不必再調整高度
1. CSS 從 position 方式改為 float方式。
2. 從 header -> mainArea 的下方。


點擊在新視窗中瀏覽此圖片
▲ 電腦版樣式

點擊在新視窗中瀏覽此圖片
▲ 手機版樣式
March 23, 2015
點擊在新視窗中瀏覽此圖片

最簡單的方法來實現用戶友好的響應導航,使用HTML5,CSS3和jQuery移動設備優化
http://responsivemobilemenu.com/

dome:
http://responsivemobilemenu.com/demo/
February 1, 2012
點擊在新視窗中瀏覽此圖片

下載以下各個.js後,放入[head]~[/head]之間
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.flashyNav.1.0.js"></script>

<script type="text/javascript">
$(function(){
  
  $('.nav1').flashyNav({
    rolloverColor: '#5400ff',  //the default color of the rollover element
    rolloverDuration: 1000,  //the default duration for the rollover
    easingMethod: 'easeInOutQuint'  //easing method used for animation
  });
  
  $('.nav2').flashyNav({
    rolloverColor: '#00d2ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutBounce'  //easing method used for animation
  });

  $('.nav3').flashyNav({
    rolloverColor: '#a800ff',  //the default color of the rollover element
    rolloverDuration: 800,  //the default duration for the rollover
    easingMethod: 'easeOutElastic'  //easing method used for animation
  });
  
});
</script>

<style type="text/css">
  
  * {margin:0; padding:0}
  body {background: #000; color:#fff; margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px}
  a {color:#fff}
  
  ul.nav {list-style:none; margin:20px; width:300px; font-size:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold}
  ul.nav li {position:relative; border-bottom:1px solid #333; display:block; height:30px; overflow:hidden}
  ul.nav li a {position:relative; color:#fff; text-decoration:none; display:block; height:20px; padding:10px 0 0 10px; z-index:100; text-transform:uppercase}
  
</style>
January 3, 2010
點擊在新視窗中瀏覽此圖片
▲ 細部設計的感覺

點擊在新視窗中瀏覽此圖片
▲ 女主人與胖小妹的合照

結合自製手工漢堡+店長給人的image+開店的理念,讓人有種健康寶寶與鄉村的感覺 (其實是有點像紅豆麵包超人的...ㄏㄏ),代言插畫人物一手抱著自製的漢堡,一手抱著自製的三明治站在滿滿的蔬菜中,有信心地推銷自製產品,結合自然食物,帶給消費者健康衛生的感覺 ...
分頁: 1/1 第一頁 1 最後頁 [ 顯示模式: 摘要 | 清單 ]