採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎，做下筆記。
▼電腦版介面
▼手機版介面 （以ICON做區別）
▼電腦版介面
▼手機版介面 （以ICON做區別）
May 24, 2018
這個CSS主要是可以從畫面的某個X座標，移動到頂端時，便停留在畫面頂端，不再需要Javascript計算位置。
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。
中文參考網頁：smaple
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。
中文參考網頁：smaple
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>
<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>
