- //[JavaScript]代码
- $(function() {
- $(".btmiddle").click(function() {
- if ($(".btmiddle").hasClass("bt")) {
- $(".btmiddle").removeClass("bt");
- $(".btmiddle").addClass("clicked");
- $("#menu").show();
- } else {
- $(".btmiddle").removeClass("clicked");
- $(".btmiddle").addClass("bt");
- $("#menu").hide();
- }
- });
- });
- //[CSS]代码
- * {
- font-family: Arial, "Free Sans";
- }
- #box {
- margin-top: 20px;
- }
- .bt, .clicked {
- height: 20px;
- color: #666;
- font-size: 13px;
- padding: 4px 10px;
- text-decoration: none;
- background: #f9f9f9;
- }
- #box .bt {
- background: -moz-linear-gradient(top, #fff, #f3f3f3);
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to (#f3f3f3));
- /* 用于 Internet Explorer 5.5 - 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
- /* 用于 Internet Explorer 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffffff, endColorstr=#f3f3f3)";;
- }
- #box .bt:hover {
- background: #f3f3f3;
- background: -moz-linear-gradient(top, #fff, #e9e9e9);
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to (#e9e9e9));
- /* 用于 Internet Explorer 5.5 - 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9);
- /* 用于 Internet Explorer 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffffff, endColorstr=#e9e9e9)";;
- }
- #box .bt:active, .clicked {
- background: #e9e9e9;
- background: -moz-linear-gradient(top, #e9e9e9, #fff);
- background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fff));
- /* 用于 Internet Explorer 5.5 - 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff);
- /* 用于 Internet Explorer 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#e9e9e9, endColorstr=#ffffff)";;
- }
- .btleft {
- border: 1px solid #e3e3e3;
- -webkit-border-radius: .5em 0 0 .5em;
- -moz-border-radius: .5em 0 0 .5em;
- border-radius: .5em 0 0 .5em;
- }
- .btleft span {
- font-size: 15px;
- }
- .btmiddle {
- border: 1px solid #e3e3e3;
- border-width: 1px 0;
- margin: 0 -4px;
- }
- .btright {
- border: 1px solid #e3e3e3;
- -webkit-border-radius: 0 .5em .5em 0;
- -moz-border-radius: 0 .5em .5em 0;
- border-radius: 0 .5em .5em 0;
- }
- .btmiddle span, .btright span {
- font-size: 9px;
- position: relative;
- top: -2px;
- }
- #menu {
- margin: 10px 0 0 100px;
- display: none;
- }
- #triangle {
- border: 1px solid #d9d9d9;
- border-width: 2px 0 0 2px;
- width: 10px;
- height: 10px;
- /* 用于 firefox, safari, chrome, 等等. */
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- z-index: 1;
- position: relative;
- bottom: -4px;
- margin-left: 25px;
- background: #fff;
- }
- #tooltip_menu {
- background: #fff;
- -webkit-border-radius: .5em;
- -moz-border-radius: .5em;
- border-radius: .5em;
- width: 220px;
- -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
- -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
- box-shadow: 0px 0px 3px rgba(0,0,0,.5);
- padding: 2px;
- }
- #tooltip_menu a {
- z-index: 2;
- padding: 0 0 7px 2px;
- display: block;
- text-decoration: none;
- color: #0066cc;
- font-size: 13px;
- }
- #tooltip_menu a:hover {
- background: #0066cc;
- color: #fff;
- }
- #tooltip_menu a img {
- position: relative;
- top: 5px;
- border: 0;
- }
- .menu_top {
- -webkit-border-radius: .5em .5em 0 0;
- -moz-border-radius: .5em .5em 0 0;
- border-radius: .5em .5em 0 0;
- }
- .menu_bottom {
- -webkit-border-radius: 0 0 .5em .5em;
- -moz-border-radius: 0 0 .5em .5em;
- border-radius: 0 0 .5em .5em;
- }
- //该片段来自于http://www.codesnippet.cn/detail/040520149424.html
来源: http://www.codesnippet.cn/detail/040520149424.html