帐号：密码：

// 设为首页 // 收藏本站 // 请您留言 // 网址导航

站内搜索：

HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO 技巧

拼音索引>> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <<拼音索引

您当前位置：网站首页 >> 网页特效 >> 菜单特效 >> 阅读文章

超醋logo下拉菜单

来源：远方教程作者：远方教程发布时间：2015-01-23 查看次数：2922　访问[新版]

　　特效代码在文本域中，您可以点击文本域下方的预览按钮先查看效果。

<style type="text/css">
.select {BORDER-RIGHT: buttonface 0px inset; BORDER-TOP: buttonface 0px inset; FONT: icon; BORDER-LEFT: buttonface 0px inset; WIDTH: 100px; CURSOR: default; BORDER-BOTTOM: buttonface 0px inset}
.selected {BORDER-RIGHT: buttonface 0px inset; PADDING-RIGHT: 0px; BORDER-TOP: buttonface 0px inset; PADDING-LEFT: 0px; BACKGROUND: window; PADDING-BOTTOM: 0px; FONT: icon; BORDER-LEFT: buttonface 0px inset; PADDING-TOP: 0px; BORDER-BOTTOM: buttonface 0px inset}
.selectTable {BORDER-RIGHT: buttonhighlight 2px inset; BORDER-TOP: buttonhighlight 2px inset; BACKGROUND: buttonface; BORDER-LEFT: buttonhighlight 2px inset; WIDTH: 100%; BORDER-BOTTOM: buttonhighlight 2px inset; HEIGHT: 100%}
.option {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 1px; FONT: icon; WIDTH: 100%; PADDING-TOP: 1px}
.dropDown {BORDER-RIGHT: windowtext 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: windowtext 1px solid; PADDING-LEFT: 0px; BACKGROUND: window; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: windowtext 1px solid; WIDTH: 100%; COLOR: windowtext; PADDING-TOP: 0px; BORDER-BOTTOM: windowtext 1px solid; POSITION: absolute}
.select .button {BORDER-RIGHT: buttonhighlight 2px outset; PADDING-RIGHT: 0px; BORDER-TOP: buttonhighlight 2px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 16px; PADDING-TOP: 0px; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: webdings; HEIGHT: 5px}</style>
<p>超醋logo下拉菜单效果-远方教程特效演示:</p>
<script language="Javascript">
var overOptionCss = "background: highlight; color: highlighttext";
var sizedBorderCss = "2 inset buttonhighlight";

var globalSelect;	//This is used when calling an unnamed selectbox with onclick="this.PROPERTY"
var ie4 = (document.all != null);
var q = 0;
function initSelectBox(el) {
	copySelected(el);
	
	var size = el.getAttribute("size");

// These two lines combined with execution in optionClick() allow you to write:
//		onchange="alert(this.options[this.selectedIndex].value)"
	el.options = el.children[1].children;
	el.selectedIndex = findSelected(el);	//Set the index now!
// Some methods that are supported on the real SELECT box
	el.remove = new Function("i", "int_remove(this,i)");
	el.item   = new Function("i", "return this.options[i]");
	el.add    = new Function("e", "i", "int_add(this, e, i)");
// The real select box let you have lot of options with the same NAME. In that case the item
// needs two arguments. When using DIVs you can't have two with the same NAME (or ID) and
// then there is no need for the second argument
	el.options[el.selectedIndex].selected = true;
	dropdown = el.children[1];
	if (size != null) {
		if (size > 1) {
			el.size = size;
			dropdown.style.zIndex = 0;
			initSized(el);
		}
		else {
			el.size = 1;
			dropdown.style.zIndex = 90;
			if (dropdown.offsetHeight > 250) {
				dropdown.style.height = "250";
				dropdown.style.overflow = "auto";
			}
		}
	}
	
	highlightSelected(el,true);
}

function int_remove(el,i) {
	if (el.options[i] != null)
		el.options[i].outerHTML = "";
}

function int_add(el, e, i) {
	var html = "<div class='option' noWrap";
	if (e.value != null)
		html += " value='" + e.value + "'";
	if (e.style.cssText != null)
		html += " style='" + e.style.cssText + "'";
	html += ">";
	if (e.text != null)
		html += e.text;
	html += "</div>"

if ((i == null) || (i >= el.options.length))
		i = el.options.length-1;

el.options[i].insertAdjacentHTML("AfterEnd", html);
}
	
function initSized(el) {
//alert("initSized -------->");
	var h = 0;
	el.children[0].style.display = "none";

dropdown = el.children[1];
	dropdown.style.visibility = "visible";

if (dropdown.children.length > el.size) {
		dropdown.style.overflow = "auto";
		for (var i=0; i<el.size; i++) {
			h += dropdown.children[i].offsetHeight;
		}

if (dropdown.style.borderWidth != null) {
			dropdown.style.pixelHeight = h + 4; //2 * parseInt(dropdown.style.borderWidth);
		}

else
			dropdown.style.height = h;

}

dropdown.style.border = sizedBorderCss;
	el.style.height = dropdown.style.pixelHeight;
}

function copySelected(el) {
	var selectedIndex = findSelected(el);

selectedCell = el.children[0].rows[0].cells[0];
	selectedDiv  = 	el.children[1].children[selectedIndex];
	
	selectedCell.innerHTML = selectedDiv.outerHTML;
}

// This function returns the first selected option and resets the rest
// in case some idiot has set more than one to selcted :-)
function findSelected(el) {
	var selected = null;
	ec = el.children[1].children;	//the table is the first child
	var ecl = ec.length;
	
	for (var i=0; i<ecl; i++) {
		if (ec[i].getAttribute("selected") != null) {
			if (selected == null) {	// Found first selected
				selected = i;
			}
			else
				ec[i].removeAttribute("selected");	//Like I said. Only one selected!
		}
	}
	if (selected == null)
		selected = 0;	//When starting this is the most logic start value if none is present

return selected;
}

function toggleDropDown(el) {
	if (el.size == 1) {
		dropDown = el.children[1];
		
		if (dropDown.style.visibility == "")
			dropDown.style.visibility = "hidden";
			
		if (dropDown.style.visibility == "hidden")
			showDropDown(dropDown);
		else
			hideDropDown(dropDown);
	}
}

function optionClick() {
	el = getReal(window.event.srcElement, "className", "option");

if (el.className == "option") {
		dropdown  = el.parentElement;
		selectBox = dropdown.parentElement;
		oldSelected = dropdown.children[findSelected(selectBox)]
		if(oldSelected != el) {
			oldSelected.removeAttribute("selected");
			el.setAttribute("selected", 1);
			selectBox.selectedIndex = findSelected(selectBox);
		}

if (selectBox.onchange != null) {	// This executes the onchange when you chnage the option
			if (selectBox.id != "") {		// For this to work you need to replace this with an ID or name
				eval(selectBox.onchange.replace(/this/g, selectBox.id));
			}
			else {
				globalSelect = selectBox;
				eval(selectBox.onchange.replace(/this/g, "globalSelect"));
			}
		}
		
		if (el.backupCss != null)
			el.style.cssText = el.backupCss;
		copySelected(selectBox);
		toggleDropDown(selectBox);
		highlightSelected(selectBox, true);
	}
}

function optionOver() {
	var toEl = getReal(window.event.toElement, "className", "option");
	var fromEl = getReal(window.event.fromElement, "className", "option");
	if (toEl == fromEl) return;
	var el = toEl;
	
	if (el.className == "option") {
		if (el.backupCss == null)
			el.backupCss = el.style.cssText;
		highlightSelected(el.parentElement.parentElement, false);
		el.style.cssText = el.backupCss + "; " + overOptionCss;
		this.highlighted = true;
	}
}

function optionOut() {
	var toEl = getReal(window.event.toElement, "className", "option");
	var fromEl = getReal(window.event.fromElement, "className", "option");

if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
		if (toEl == null)
			return;
		if (toEl.className != "option")
			return;
	}
	if (toEl != null) {
		if (toEl.className != "option") {
			if (fromEl.className == "option")
				highlightSelected(fromEl.parentElement.parentElement, true);
		}
	}
	if (toEl == fromEl) return;
	var el = fromEl;

if (el.className == "option") {
		if (el.backupCss != null)
			el.style.cssText = el.backupCss;
	}

}

}

function hideDropDown(el) {
	if (typeof(fade) == "function")
		fade(el, false);
	else
		el.style.visibility = "hidden";
}

function showDropDown(el) {
	if (typeof(fade) == "function")
		fade(el, true);
	else if (typeof(swipe) == "function")
		swipe(el, 2);
	else
		el.style.visibility = "visible";
}

if (ie4) {
	window.onload = initSelectBoxes;
	document.onclick = hideShownDropDowns;
}
</SCRIPT><script language="Javascript">
function writeSelectBox(matrix, id, size, onchange, css) {
	var d = window.document;

var ie4 = (document.all != null);

if (ie4) {
//		alert("Before!");
		var s = createIEString(matrix, id, size, onchange, css);
		document.write(s);
//		alert("After!");
//		alert(s);
	}

else {
		document.write(createXString(matrix, id, size, onchange, css));
	}
}

function createIEString(matrix, id, size, onchange, css) {
	var str = "";
	// Span startTag	
		str += '<span class="select"';
		if (size == null)
			size = 1;
		str += ' size="' + size + '"';	
		if (id != null)
			str += ' id="' + id + '"';
		if (onchange != null)
			str += ' onchange="' + onchange + '"';
		if (css != null)
			str += ' style="' + css + '"';
		str += '>\n';
	
	// Table Tag
		str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n';
		str += ' onclick="toggleDropDown(this.parentElement)">\n';
		str += '<tr>\n';
		str += '<td class="selected"> </td>\n';
		str += '<td align="CENTER" valign="MIDDLE" class="Button"\n';
		str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n';
		str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n';
		str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
		str += '</tr>\n';
		str += '</table>\n';
		
	// DropDown startTag
		str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n';
		
		for (var i=0; i<matrix.length; i++) {
			html     = matrix[i].html;
			value    = matrix[i].value;
			css      = matrix[i].css;
			selected = matrix[i].selected;
			
		// Write option starttag
			str += '<div class="option"';
			if (value != null)
				str += ' value="' + value + '"';
			if (css != null)
				str += ' style="' + css + '"';
			if (selected != null)
				str += ' selected';
			str += '>\n';
			
		// Write HTML contents
			str += html;
		// Write end tag
			str += '</div>\n';
		}
	
	//DropDown endtag
		str += '</div>\n';
		
	// Span endTag
		str += '</span>\n';
		
	return str;
}

function createXString(matrix, id, size, onchange, css) {
//	var str = "\n";
	// form startTag
	var str = '<form>\n';
	// Select startTag
	str += '<select';
	if (size == null)
		size = 1;
	str += ' size="' + size + '"';	
	if (id != null)
		str += ' id="' + id + '"';
	if (onchange != null)
		str += ' onchange="' + onchange + '"';
//	if (css != null)
//		str += ' style="' + css + '"';
	str += '>\n';
	// write options
	for (var i=0; i<matrix.length; i++) {
		html     = matrix[i].html;
		value    = matrix[i].value;
		css      = matrix[i].css;
		selected = matrix[i].selected;
		
	// Write option starttag
		str += '\n<option';
		if (value != null)
			str += ' value="' + value + '"';
//		if (css != null)
//			str += ' style="' + css + '"';
		if (selected != null)
			str += ' selected';
		str += '>';
		
	// Write HTML contents
		str += stripTags(html);
	// Write end tag
		str += '</option>\n';
	}
	str += '\n</select>\n';
	str += '</form>\n';

return str;
}

function stripTags(str) {
	var s = 0;
	var e = -1;
	var r = "";

s = str.indexOf("<",e);

do {
		r += str.substring(e + 1,s);
		e = str.indexOf(">",s);
		s = str.indexOf("<",e);
	}
	while ((s != -1) && (e != -1))

r += str.substring(e + 1,str.length);

return r;
}

function Option(html, value, css, selected) {
	this.html = html;
	this.value = value;
	this.css = css;
	this.selected = selected;
}
</SCRIPT><SCRIPT language=JavaScript>

topArray = new Array(); 
topArray[0] = new Option('<nobr><img style="cursor:pointer;" onclick="openURL(this.src)" onload="zoomIMG(this,625)" src="images/xhwtz.gif" alt="风行软件下载！" width=88 height=31 border=0 align="absmiddle"> [美女图片]</nobr>', "http://www.52yfjc.com/list.asp?id=12");
topArray[1] = new Option('<nobr><img style="cursor:pointer;" onclick="openURL(this.src)" onload="zoomIMG(this,625)" src="/images/logo-link.png" alt="站长建站之家！" width=88 height=31 border=0 align="absmiddle"> [远方教程]</nobr>', "http://www.52yfjc.com/");
topArray[2] = new Option('<nobr><img style="cursor:pointer;" onclick="openURL(this.src)" onload="zoomIMG(this,625)" src="./images/tmsc.jpg" alt="网购的第一选择！" width=88 height=31 border=0 align="absmiddle"> [天猫商城]</nobr>', "http://www.tmall.com/go/chn/tbk_channel/tmall_new.php?pid=mm_31545295_3013744_10170214&eventid=101334");
topArray[3] = new Option('<nobr><img style="cursor:pointer;" onclick="openURL(this.src)" onload="zoomIMG(this,625)" src="./images/xhlogo.gif" alt="让你捧腹大笑！" width=88 height=31 border=0 align="absmiddle"> [精品笑话]</nobr>', "http://yfxiaohua.3vzhuji.com/");
writeSelectBox(topArray, "select2", 1, "window.open(this.options[this.selectedIndex].value, '_blank')", "margin-left: 10; width: 150;");
</SCRIPT>
<script type="text/javascript">
/*tupianxuanfu*/
var cpro_id = "u1828747";
</script><script src="http://cpro.baidustatic.com/cpro/ui/i.js" type="text/javascript"></script>

标签：超醋 lo 菜单导航 Google一下

分享到： QQ空间新浪微博腾讯微博人人网

打印 |

关闭评论

上一篇：超链接陷下效果

下一篇：很酷的连接提示效果

·查看安全快捷上网技巧

图片新闻

美女户外健身, 美翻

真人美女和动漫美女

站内搜索

猜您喜欢