Issuu on Google+

側邊自動滑出式超連結表單


第1頁

<!-----側邊自動滑出式超連結表單 側邊自動滑出式超連結表單------> <!--------CSS 語法開始-----------> 語法開始 <div class='clear'></div>

重要,可以 可以更改 重要 可以更改

<style type="text/css" > #menu { position: absolute; top: 53px;

/* /*表單在螢幕上下的位置*/

left: -170px;

/*表單在螢幕左右的位置*/

width: 184px; z-index: 9999; position:fixed; -webkit-transition: transition: left 1.0s ease-out; ease

/*滑出時間 滑出時間1秒*/

-moz-transition: transition: left 1.0s ease-out; ease -o-transition: transition: left 1.0s ease-out; ease } #menu:hover { left: -4px;/*opacity:0.9;*/}

/*滑鼠經過 滑鼠經過,滑到

的位置*/ #menu-top { background:url(http://goo.gl/HWSde) no-repeat; no height: 32px;} #menu-content { background:url(http://goo.gl/v5hYt) repeat-y; repeat text-align: center; padding: 0 15px 0 16px; position: relative; min-height:20px;}

CSS 語法


第2頁

CSS 語法

#logo { margin-bottom: bottom: 22px; margin-top: margin top: 20px; } /*logo 在表單 的位置*/ 重要,可以 可以更改 重要 可以更改

#menu-bottom {

background:url(http://goo.gl/J5BWu) no-repeat; no height: 39px;} ul#top-menu menu li { padding-bottom: padding 17px; } ul#top-menu menu li a { text-decoration:none; text }

ul#top-menu menu a strong { color:#fff; font-size:16px; display: inline; } ul#top-menu menu a span { color:#929292; display:block; font-size:10px; text-transform: transform: uppercase; margin-top:7px; } ul#top-menu a span.sf-sub-indicator span.sf { display: inline; color: #F6E68B; font-size: 16px; } ul#top-menu menu li.current-menu-item li.current item > a strong, ul#top-menu ul#top li a:hover strong/*, ul#top-menu ul#top menu li.sfHover > a > strong */{ color: #f6e68b; }

/*滑鼠經過 滑鼠經過,文字改變的顏色*/ 重要,可以 重要 可以更改 可以更改


第3頁

CSS 語法

ul#top-menu menu li ul { background: url(http://goo.gl/ngLpA) no-repeat no repeat bottom left; /*控制右邊分頁*/ width: 182px; padding: 12px 0; text-align: center; z-index: 9999; left: 152px; } top { span.dropdown-top background: url(http://goo.gl/16JiA) no-repeat; no display: block; width: 181px; height: 14px; position: absolute; top: -14px; left: 0px; }

/*.nav ul { position:absolute; top:-999em; top: 999em; background-position: background bottom; background-repeat: background no-repeat; z-index: index: 10; } .nav li { float:left; position:relative; } .nav nav a { display:block; float: left;} .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:50px; } .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; top: 999em; } .nav li li:hover ul, ul.nav li li.sfHover ul { left:192px; top:0px; }


第4頁

CSS 語法

. nav li:hover ul, .nav li li:hover ul { top: -999em; } .nav li li {display: block;

padding: 10px; float: left; height:

auto !important; } .nav li ul { width: 179px; z-index:1000; z } .nav li li a:link, .nav li li a:visited {display: block; height: auto; float: left; } .nav li:hover { visibility: inherit; } */ /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu menu * { margin: 0; padding: 0; list-style: list style: none; } .sf-menu { line-height: height:1.0; } .sf-menu menu ul { position: absolute; top: -999em; 999em; width:10em; /* left offset of submenus need to match (see below) */ } .sf-menu menu ul li { width:155px;padding:0 10px 0 15px; } .sf-menu menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu menu li { float: left; position: relative; } .sf-menu menu a { display: block; position: relative; } .sf-menu nu li:hover ul, .sf-menu .sf menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */

z-index: 99; }

ul.sf-menu menu li:hover li ul, ul.sf-menu ul.sf menu li.sfHover li ul { top: -999em; } ul.sf-menu menu li li:hover ul, ul.sf-menu ul.sf menu li li.sfHover ul { left: 176px; /** match ul width */ top: -9px; } ul.sf-menu menu li li:hover li ul, ul.sf-menu ul.sf menu li li.sfHover li ul { top: -999em; } ul.sf-menu menu li li li:hover ul, ul.sf-menu ul.sf menu li li li.sfHover ul { left: 10em; /* match ul width */ top: -9px; }


第5頁

CSS 語法

/*** adding sf-vertical vertical in addition to sf-menu sf menu creates a vertical menu .sf-vertical, .sf-vertical vertical li { width: 10em; } ***/ /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */ .sf-vertical li:hover over ul, .sf-vertical .sf vertical li.sfHover ul { left: 11em; /* match ul width */ top: -9px; } /*** alter arrow directions ***/ .sf-vertical .sf-sub-indicator indicator { background-position: background -10px 10px 0; } /* IE6 gets solid image only */ .sf-vertical a > .sf-sub sub-indicator { background-position: position: 0 0; } /* use translucent arrow for modern browsers*/ /* hover arrow direction for modern browsers*/ .sf-vertical vertical a:focus > .sf-sub-indicator, .sf .sf-vertical vertical a:hover > .sf-sub-indicator, indicator, .sf-vertical .sf a:active > .sf-sub-indicator, indicator, .sf-vertical .sf li:hover > a > .sf-sub-indicator, indicator, .sf-vertical .sf li.sfHover > a > .sf-sub--indicator { background-position: position: -10px 10px 0; /* arrow hovers for modern browsers*/ } .nav li, .nav a { float: none; } </style> <!--------CSS 語法結束-----------> 語法結束 CSS 語法,大部分是不需要更動 語法 大部分是不需要更動 的,有特別註明的地方可以試 有特別註明的地方可以試 著更動看看


第6頁

HTML 語法

<!--------文本開始---------------------> <div id='container'>

可以更改換成 ,後面的 可以更改換成自己的 換成自己的 logo, width=”88”可以控制 可以控制 logo 大小

<div id='menu'> <div id='menu-top'/></div> top'/></div> <div id='menu-content'> content'>

<a expr:href='data:blog.homepageurl'> data:blog.homepageurl'> <img alt="Memoir Theme" height="44" id="logo" src="http://goo.gl/EroKZ" width="88" /> </a> vertical sf-menu' sf id='top-menu'> <ul class='nav sf-vertical <li class='menu-item item menu-item-type-post_type menu menu-item-object-page' page' id='menu-item-298'> id='menu <a href="#"> <strong>網站名稱 網站名稱 1</strong> <span>網站說明 網站說明 1</span> </a> <!-----------分頁開始 分頁開始------------->

紅色框線的範圍是一 組,如果需要有分頁的 如果需要有分頁的 超連結,就要複製這一 超連結 就要複製這一 整組

<ul class='sub--menu'> <span class='dropdown-top'></span> class='dropdown <li class='menu-item class='menu menu-item-type-post_type post_type menu-item-object-page' page' id='menu-item-299'> id='menu <a href="#"> <strong> <strong>網站名稱 1-1</strong> <span> <span>網站說明 1-1</span> </a> </li>

藍色框線的範圍是一組分頁,如果需要增 藍色框線的範圍是一組分頁 如果需要增 加分頁,就要複製這一整組 加分頁 就要複製這一整組


第7頁

HTML 語法

</ul> <!-----------分頁結束 束-------------> </li>

<li class='menu-item item menu-item-type-post_type menu menu-item-object-page' page' id='menu-item-400'> id='menu <a href="#"> <strong>網站名稱 網站名稱 2</strong> <span>網站說明 網站說明 2</span> </a>

如果需要增加沒有分頁 的超連結,就要複製這一 的超連結 就要複製這一 整組

</li>

<li class='menu-item item menu-item-type-post_type menu menu-item-object-page' page' id='menu-item-306'> id='menu <a href="#"> <strong>網站名稱 網站名稱 3</strong> <span>網站說明 網站說明 3</span>

這是一組沒有分頁的超 連結

</a> </li>

<li class='menu-item item menu-item-type-post_type menu menu-item-object-page' page' id='menu-item-500'> id='menu <a href="#">


第8頁

<strong>網站名稱 4</strong> <span>網站說明 4</span> </a> <!-----------分頁開始 分頁開始-------------> <ul class='sub--menu'> <span class='dropdown-top'></span> class='dropdown <li class='menu-item class='menu menu-item-type-post_type post_type menu-item-object-page' page' id='menu-item-501'> id='menu <a href="#"> <strong> <strong>網站名稱 4-1</strong> <span> <span>網站說明 4-1</span> </a> </li>

這是一組有分頁的超連結

<li class='menu-item class='menu menu-item-type-post_type post_type menu-item-object-page' page' id='menu-item-502'> id='menu <a href="#"> <strong> <strong>網站名稱 4-2</strong> <span> <span>網站說明 4-2</span> </a> </li> <li class='menu-item class='menu menu-item-type-post_type t_type menu-item-object-page' page' id='menu-item-503'> id='menu <a href="#">

HTML 語法


第9頁

<strong>網站名稱 4-3</strong> 4 <span> <span>網站說明 4-3</span> </a> </li> </ul> <!-----------分頁結束 分頁結束-------------> </li> </ul> </div> <!-- end #menu-content #menu --> <div id='menu-bottom'/></div> bottom'/></div> </div> <!-- end #menu --> </div> <div class='clear'></div> <!--------文本結束---------------------> <!-----側邊自動滑出式超連結表單 側邊自動滑出式超連結表單------>

HTML 語法



Hyperlink