js navigation menu

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

/**
style
*/
.chanel_list
{
float:left;
width:auto;
background-color:#F0F0EE;
border-top:solid 3px #288dab;
}
.chanel_list_item
{
height: 33px;
line-height: 33px;
border:solid 1px #DEDEDE;
border-top:none;
text-align:left;
font-size:14px;
padding-left:30px;
cursor:pointer;
margin-top:2px;
background:url(../images/common/pixel_round2.png) no-repeat 15px center;
color:#666;
}
.chanel_list_item_hover
{
font-weight:bold;
color:#288dab;
border-right: none;
background:none;
background: url("../images/common/arrow_left.png") no-repeat scroll left center #FFFFFF;
}
.chanel_list_item_bottom
{
height: 87px;
border:solid 1px #DEDEDE;
border-top:none;
}
.chanel_list_right
{
width:740px;
background-color:#fff;
border:solid 1px #288dab;
border-left:none;
border-top:solid 2px #F0F0EE;
}
.chanel_list_right_title
{
float:left;
border-left:none;
height:33px;
line-height:33px;
padding-left:20px;
width:720px;
}
.chanel_list_right_content
{
float:left;
border-left:solid 1px #288dab;
padding:10px;
padding-top:0px;
}
.chanel_list_right_item
{
background:url(../images/common/arrow.gif) no-repeat 10px 16px;
float:left;
height:35px;
line-height:35px;
margin-top:5px;
margin-left:5px;
font-size:13px;
padding-left:25px;
width:690px;
background-color:#efefef;
overflow:hidden;
}
.chanel_list_right_item_hover
{
background-color:#FF9;
}
<script type="text/javascript">
<!--
var y = 0;
There are x = 0;
var classid = "";
was timeoutId = 0;
jQuery(function() {
jQuery(".chanel_list_item").bind("mouseenter", function() {
afterMouseLeaveRes();
var temp = jQuery(this).attr("id");
y = jQuery(this).offset().top-2;
x = jQuery(this).offset().left+jQuery(this).width()+23;
jQuery(".chanel_list_right").css("top", y);
jQuery(".chanel_list_right").css("left", 210);
classid = jQuery(this).attr("id");
jQuery(".chanel_list_right_children").hide();
jQuery("#class_" + classid).show();
jQuery(this).addClass("chanel_list_item_hover");
jQuery(".chanel_list_right").show();
});
jQuery(".chanel_list_item").bind("mouseleave", function(e) {
mouseX = e.pageX;
divX = jQuery(this).offset().left + jQuery(this).width() + 23;
if (mouseX > divX) {
afterMouseLeaveRes();
}
});
jQuery(".chanel_list_right").bind("mouseleave", function() {
afterMouseLeaveRes();
});
jQuery(".chanel_list_right_item")
.bind(
"mouseenter",
function() {
jQuery(
".chanel_list_right_item .chanel_list_right_item_hover")
.removeClass("chanel_list_right_item_hover");
jQuery(this).addClass(
"chanel_list_right_item_hover");
});
jQuery(".chanel_list_right_item").bind("mouseleave", function() {
jQuery(this).removeClass("chanel_list_right_item_hover");
});
});
function afterMouseLeaveRes() {
jQuery(".chanel_list_item_hover").removeClass("chanel_list_item_hover");
jQuery(".chanel_list_right_item_hover").removeClass(
"chanel_list_right_item_hover");
jQuery("#chanel_list_right").hide();
}
function secondarySearch(subjectId,parentId,parentName)
{
document.location.href = "<%=realPath%>/search/searchresult?subjectId="
+ subjectId + "&parentId=" + parentId
+ "&parentIdLevel=1&parentName=" + parentName;
}
//-->
</script>
<div class="content_top">
<div class="content_top_left">
<! - Navigation menu ->
<div class="chanel_list">
<s:iterator value="menuNavigationsList" status="arr">
<div class="chanel_list_item"
id="<s:property value="viewClaRelEntity.cid"/>">
<a
href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')"><s:property
value="viewClaRelEntity.name" /></a>
<%-- <s:property value="viewClaRelEntity.name" /> --%>
</div>
</s:iterator>
</div>
<div id="chanel_list_right" class="chanel_list_right"
style="left: 0px; overflow: hidden; position: absolute; top: 0px; display: none;">
<s:iterator value="menuNavigationsList" status="arr">
<div id="class_<s:property value="viewClaRelEntity.cid"/>"
class="chanel_list_right_children" style="display: none">
<div class="chanel_list_right_content">
<s:iterator value="lsNavigationsA" status="arr">
<div class="chanel_list_right_item"
style=" height: auto; line-height: 15px;">
<a style="font-weight: 900; color: #288DAB;"
href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')">
<s:property value="viewClaRelEntity.name" />
</a>:
<s:iterator value="lsNavigationBs" status="arr1">
<s:if test="%{viewClaRelEntity.name==null}">
<br/>
</s:if>
<s:else>
<a style="font-weight: 900;"
href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')">
<s:property value="viewClaRelEntity.name" />、
</a>
</s:else>
</s:iterator>
<br/>
</div>
<div style="height: 2px;"></div>
</s:iterator>
</div>
</div>
</s:iterator>
</div>
</div>
</div>

Reproduced in: https: //my.oschina.net/kt431128/blog/224707

Guess you like