现在比较流行的三级菜单,京东商城,淘宝网效果等等。(修正版)

会有一股神秘感。 提交于 2020-02-28 04:12:53

首先想关注过我的朋友们表示歉意。由于疏忽文章写的有点杂乱。修正我整理了一下。代码不是主要的在于一些话的分享。技术只是抛砖引玉了一下。

顺便和大家分享一些文字。

先看一下效果图
产品端点效应:两个端点的产品更容易快速形成品牌及规模效益:一是高端产品,锁定奢侈消费,高投稿高价值高回报。二是简易产品,不追求附加值,仅满足客户基本需求,如快捷酒店只提睡眠%2B洗澡%2B上网%2B早餐。很简单,但却占领了庞大市场份额,低投入低价值低回报,但可以快速复
View Code
页面
 1 
<div class='allsort'>
 2                     
<div class='mt'>
 3                         
<strong>导航菜单</strong>
 4                     
</div>
 5                     
<div class='mc'>
 6                         
<asp:Repeater ID="BigMenu" runat="server" OnItemDataBound="BigMenu_ItemDataBound"
 7                             EnableViewState
="false">
 8                             
<ItemTemplate>
 9                                 
<div class='item '>
10                                     
<span> <h3>  <href="#"> <%#Eval("menu_name"%></a></h3>  </span>//第一级
11                                     
<div class='i-mc'>
12                                         
<div class='subitem'>
13                                             
<asp:Repeater ID="MinMenu" runat="server" OnItemDataBound="MinMenu_ItemDataBound"  EnableViewState="false">
14                                                 
<ItemTemplate>
15                                                     
<dl class="fore"> <dt ><href="#">   <%#Eval("sub_name")%></a></dt>
16                                                     
<dd><em><href="#">
17                                                                 
<asp:Repeater ID="MinMenu2" runat="server" EnableViewState="false">//第二级
18                                                                     
<ItemTemplate>
19                                                                       
<href="#" onclick="fn_getmenu1('<%#Eval("menu_name")%>','<%#Eval("menu_code")+"?menuId="+Eval("menu_id")+(Eval("open_parameter")!="" ? "&"+Eval("open_parameter") : "")%>','<%#Eval("menu_id")%>','<%#Eval("open_type")%>')">// 第三级
20                                                                             
<%#Eval("menu_name")%>
21                                                                         
</a>
22                                                                  
<%#((Container.ItemIndex + 1) % 4== 0 ? "<br/>" : "" %> // 控制每行显示多少个
23                                                                     
</ItemTemplate>
24                                                                 
</asp:Repeater>
25                                                             
</a></em>
26                                                         
</dd>
27                                                     
</dl>
28                                                 
</ItemTemplate>
29                                             
</asp:Repeater>
30                                         
</div>
31                                     
</div>
32                                 
</div>
33                             
</ItemTemplate>
34                         
</asp:Repeater>
35 
36                         
<script type="text/javascript">
37                             $(".allsort").hoverForIE6({ current: "allsorthover", delay: 150 });
38                             $(".allsort .item").hoverForIE6({ delay: 150 });
39     

经验是创新的天敌,往往因有经验而散漫傲物,就因为这经验,而令其思维陷入固定的模式中无法突破,经验这东西成事不足,败事有余,经验只能作为进入某个领域的基础,而不能作为权衡人才的标准。根据左右机构观察,70%的创新来自于无经验人士,有经验只能做纵深研究,无法横向贯通。

做营销只需要做好两件事:研究客户和研究对手。研究客户,知道客户想要什么,不喜欢什么,从而开发出适销对路的产品;研究View Code
js脚本:
(
function($) { $.extend($.browser, { client: function() { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, bodyWidth: document.body.clientWidth, bodyHeight: document.body.clientHeight }; }, scroll: function() { return { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight, bodyWidth: document.body.scrollWidth, bodyHeight: document.body.scrollHeight, left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop + document.body.scrollTop }; }, screen: function() { return { width: window.screen.width, height: window.screen.height }; }, isIE6: $.browser.msie && $.browser.version == 6, isMinW: function(val) { return Math.min($.browser.client().bodyWidth, $.browser.client().width) <= val; }, isMinH: function(val) { return $.browser.client().height <= val; } }) })(jQuery); (function($) { $.widthForIE6 = function(option) { var s = $.extend({ max: null, min: null, padding: 0 }, option || {}); var init = function() { var w = $(document.body); if ($.browser.client().width >= s.max + s.padding) { w.width(s.max + "px"); } else if ($.browser.client().width <= s.min + s.padding) { w.width(s.min + "px"); } else { w.width("auto"); } }; init(); $(window).resize(init); } })(jQuery);
(
function($) { $.fn.hoverForIE6 = function(option) { var s = $.extend({ current: "hover", delay: 1000 }, option || {}); $.each(thisfunction() { var timer1 = null, timer2 = null, flag = false; $(this).bind("mouseover"function() { if (flag) { clearTimeout(timer2); } else { var _this = $(this); timer1 = setTimeout(function() { _this.addClass(s.current); flag = true; }, s.delay); } }).bind("mouseout"function() { if (flag) { var _this = $(this); timer2 = setTimeout(function() { _this.removeClass(s.current); flag = false; }, s.delay); } else { clearTimeout(timer1); } }) }) } })(jQuery);
(
function($) {
    $.extend({ _jsonp: { scripts: {}, counter: 
1, head: document.getElementsByTagName("head")[0], name: function(callback) {
        
var name = '_jsonp_' + (new Date).getTime() + '_' + this.counter; this.counter++;
        
var cb = function(json) { eval('delete ' + name); callback(json); $._jsonp.head.removeChild($._jsonp.scripts[name]); delete $._jsonp.scripts[name]; }; eval(name + ' = cb'); return name;
    }, load: 
function(url, name) { var script = document.createElement('script'); script.type = 'text/javascript'; script.charset = this.charset; script.src = url; this.head.appendChild(script); this.scripts[name] = script; } 
}, getJSONP: 
function(url, callback) {
    
var name = $._jsonp.name(callback); 
var url = url.replace(/{callback};/, name); $._jsonp.load(url, name); return this; } }); })(jQuery);
(
function($) {
    $.fn.jdTab 
= function(option, callback) {
        
if (typeof option == "function") { callback = option; option = {}; };
        
var s = $.extend({ type: "static", auto: false, source: "data", event: "mouseover", currClass: "curr", tab: ".tab", content: ".tabcon", itemTag: "li", stay: 5000, delay: 100, mainTimer: null, subTimer: null, index: 0 }, option || {});
        
var tabItem = $(this).find(s.tab).eq(0).find(s.itemTag), contentItem = $(this).find(s.content); if (tabItem.length != contentItem.length) return false;
        
var reg = s.source.toLowerCase().match(/http:\/\/|\d|\.aspx|\.ascx|\.asp|\.php|\.html\.htm|.shtml|.js|\W/g);
        
var init = function(n, tag) { s.subTimer = setTimeout(function() { hide(); if (tag) { s.index++if (s.index == tabItem.length) s.index = 0; } else { s.index = n; }; s.type = (tabItem.eq(s.index).attr(s.source) != null? "dynamic" : "static"; show(); }, s.delay); };
        
var autoSwitch = function() { s.mainTimer = setInterval(function() { init(s.index, true); }, s.stay); };
        
var show = function() {
            tabItem.eq(s.index).addClass(s.currClass); 
switch (s.type) {
                
defaultcase "static":
                    
var source = ""breakcase "dynamic":
                    
var source = (reg == null? tabItem.eq(s.index).attr(s.source) : s.source; tabItem.eq(s.index).removeAttr(s.source); break;
            }; 
if (callback) { callback(source, contentItem.eq(s.index), s.index); }; contentItem.eq(s.index).show();
        }; 
   
var hide = function() { tabItem.eq(s.index).removeClass(s.currClass); contentItem.eq(s.index).hide(); }; tabItem.each(function(n) { $(this).bind(s.event, function() { clearTimeout(s.subTimer); clearInterval(s.mainTimer); init(n, false); return false; }).bind("mouseleave"function() { if (s.auto) { autoSwitch(); } else { return; } }) }); if (s.type == "dynamic") { init(s.index, false); }; if (s.auto) { autoSwitch(); } } })(jQuery);
(
function($) {
    $.fn.jdSlide 
= function(option) {
        
var settings = $.extend({ width: null, height: null, pics: [], index: 0, type: "num", current: "curr", delay1: 200, delay2: 8000 }, option || {}); var element = thisvar timer1, timer2, timer3, flag = truevar total = settings.pics.length; var init = function() { var img = "<ul style='position:absolute;top:0;left:0;'><li><a href='" + settings.pics[0].href + "' target='_blank'><img src='" + settings.pics[0].src + "' width='" + settings.width + "' height='" + settings.height + "' /></a></li></ul>"; element.css({ "position""relative" }).html(img); $(function() { delayLoad(); }) }; init(); var initIndex = function() { var indexs = "<div>"var current; var x; for (var i = 0; i < total; i++) { current = (i == settings.index) ? settings.current : ""switch (settings.type) { case "num": x = i + 1breakcase "string": x = settings.pics[i].alt; breakcase "image": x = "<img src='" + settings.pics[i].breviary + "' />"defaultbreak; }; indexs += "<span class='" + current + "'><a href='" + settings.pics[i].href + "' target='_blank'>" + x + "</a></span>"; }; indexs += "</div>"; element.append(indexs); element.find("span").bind("mouseover"function(e) { clearInterval(timer1); clearInterval(timer3); var index = element.find("span").index(this); if (index == settings.index) { return; } else { timer3 = setInterval(function() { if (flag) running(parseInt(index)); }, settings.delay1); } }).bind("mouseleave"function(e) { clearInterval(timer3); timer1 = setInterval(function() { running(settings.index + 1true); }, settings.delay2); }) }; var running = function(index, tag) {
            
if (index == total) { index = 0; }; element.find("span").eq(settings.index).removeClass(settings.current); element.find("span").eq(index).addClass(settings.current); timer2 = setInterval(function() {
                
var pos_y = parseInt(element.find("ul").get(0).style.top);
                
var pos_a = Math.abs(pos_y + settings.index * settings.height);
                
var pos_b = Math.abs(index - settings.index) * settings.height;
                
var pos_c = Math.ceil((pos_b - pos_a) / 4); if (pos_a == pos_b) { clearInterval(timer2); if (tag) { settings.index++if (settings.index == total) { settings.index = 0; } } else { settings.index = index; }; flag = true; } else { if (settings.index < index) { element.find("ul").css({ top: pos_y - pos_c + "px" }); } else { element.find("ul").css({ top: pos_y + pos_c + "px" }); }; flag = false; } 
            }, 
10);
        }; 
 
var delayLoad = function() { var img = ""for (var i = 1; i < total; i++) { img += "<li><a href='" + settings.pics[i].href + "' target='_blank'><img src='" + settings.pics[i].src + "' width='" + settings.width + "' height='" + settings.height + "' /></a></li>"; }; element.find("ul").append(img); timer1 = setInterval(function() { running(settings.index + 1true); }, settings.delay2); if (settings.type) initIndex(); }; } })(jQuery);
  
对手,掌握敌我优劣势,知道何时应该围而不打,何时隔而不围,何时吃一个、挟一个、看一个,何时进攻、何时撤退转移,何时打局部战,何时打全歼战。

夏天总嫌床太小,而冬天却总感觉到床太大了,做营销就要认识到这种不同时段不同季节下的客户的不同需求,要认识到市场是随时在发生变化的,销售要因季节的变化而变化,所谓策略,是指某个阶段的谋划,而并非一策到底。
View Code
CSS样式:
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{
    margin
: 0; padding: 0;
}

ol, ul
{  list-style: none;}
:focus
{   outline: 0;}
a img
{   border: 0;}
img
{  vertical-align: middle; }
table
{   empty-cells: show;  width: 100%;  height: 24px;}
ins
{   text-decoration: none;}
del
{   text-decoration: line-through;}
em
{   font-style: normal;}
.fl
{   float: left;}
.fr
{   float: right;}
 .fn
{   float: none;}
.al
{   text-align: left;}
.ac
{   text-align: center;}
.ar
{  text-align: right;}
.clr
{
    display
: block;
    overflow
: hidden;
    clear
: both;
    height
: 0;
    line-height
: 0;
    font-size
: 0;
}
.clearfix:after
{
    content
: ".";
    display
: block;
    height
: 0;
    clear
: both;
    visibility
: hidden;
}
.clearfix
{  display: inline-table;}
/* Hides from IE-mac \*/*html .clearfix{  height: 1%;}
.clearfix
{display: block;}
/* End hide from IE-mac */* + html .clearfix{  min-height: 1%;}
.overflow
{   overflow: hidden;}
.form label, .form input, .form select, .form textarea, .form button, .form .label
{
    float
: left;
    font-size
: 12px;
}
.block
{ display: block;   overflow: hidden;  cursor: pointer;}
.hide
{  display: none;}
.invisible
{   visibility: hidden;}
.tab
{  overflow: hidden;   zoom: 1;}
.tab li, .tab a, .tab-item
{  float: left; 
    cursor
: pointer;
     text-align
: center;
     
}
.m, .mt, .mc, .mb
{ overflow: hidden;   zoom: 1;}
.mt .extra
{  float: right;}
.m
{   margin-bottom: 10px;}
.btn-img
{cursor: pointer;   margin: 0; padding: 0;  border: 0; text-align: center;}
.btn-text
{  cursor: pointer;  margin: 0; padding: 0; text-align: center;}
/*text*/
body
{   font-family: "宋体" ,Arial,Lucida,Verdana,Helvetica,sans-serif; font-size: 12px;  color: #333; line-height: 150%;   background: #fff;}
h1
{ font-size: 20px;font-family: Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;}
h2
{  font-size: 14px;}
h3
{   font-size: 14px;}
h4
{   font-size: 12px;}
h5
{   font-size: 12px;}
h6
{   font-size: 12px;}
/*link*/
a:link, a:visited
{  color: #333;  text-decoration: none;}
a:hover
{ color: #c00;   text-decoration: underline;}
#header
{  margin-bottom: 7px;    height: 22px;}

/*allsort*/
/* 定位 */ 
.allsort
{
    float
: left;
        width
: 141px;
        height
: 600px;
        margin-right
: 4px;
        background-color 
:#D2E0F2;
        background
: no-repeat 0 -166px;
        position
:  relative;
        z-index
: 11;
    left
: 9px;
    top
: 56px;
     background 
: url(../Login/dl-Image/1-3-150.jpg) repeat-y;
     
}
.allsort .mt
{
    height
: 25px;
    width
: 141px;
    line-height
: 25px;
    background
: url(../Login/dh/1-2-h.jpg) no-repeat; 
    cursor
: pointer;
    
}
/* <strong>导航菜单</strong>字体控制*/
.allsort .mt strong
{
    float
: left;
    font-size
: 14px;
    color
: #630;
    width
: 140px;
    height
: 25px;
   text-align 
:center;
}
#o-search .allsort .mt a
{
    color
: #630;
}
.allsort .mt .extra
{
    display
: none;
}
/*大菜单单框 */
.allsort .mc
{
    border
: 0px solid #D2E0F2;
    position
: absolute;
        top
: 30px;
            overflow
: visible;
        width
: 135px;
            padding
: 0 3px 0;
            -moz-border-radius
: 0 0 0px 0px;
            -webkit-border-radius
: 0 0 0px 0px;
   left 
:-3px;
    height
: 315px;
}
.allsort .item
{
    width
: 140px;
    height
: 33.5px;
    background
: url(../Login/dh/1-2-33px.jpg) no-repeat;
    border-top
: 0px solid #f4f3f0;
}
.allsort .fore
{
    
    border-top
: none;
}
.allsort span
{
    
    display
: block;
    width
: 150px;
    position
: relative;
    z-index
: 1;
}
/* 导航字体、长和高 */
.allsort h3
{
    width
: 98px;
    height
: 31px;
    padding-left
: 40px;
    border
: 0px solid #DCF1F0;

    border-width
: 0px 0 0px 0px;
    background
: no-repeat -318px -240px;
    font-weight
: normal;
}
.allsort h3 a:link, .allsort h3 a:visited
{
 
    display
: block;
    height
: 30px;
    line-height
: 30px;
    color
: #333;
}
.allsort h3 a:hover, .allsort h3 a:active
{
    color
: #f6b704;
}
.allsort s
{
    display
: block;
    position
: absolute;
    top
: 10px;
    left
: 182px;
    width
: 13px;
    height
: 13px;
    background
: no-repeat -274px -216px;
}
/*  边框颜色*/
.allsort .item .i-mc
{
    display
: none;
    position
: absolute;
    left
: 141px;
    top
: 0;
    width
:420px;
    border
: 1px solid #f6b704;
    background 
: url(../Login/dl-Image/1-3-488px.jpg) ;
    overflow
: hidden;
}
.allsort .item dt
{
    padding
:  3px 10px 0 0;
    font-weight
: bold;
}

.allsort .item dd
{
    padding
: 3px 0 0;
    overflow
: hidden;
    zoom
: 1;
}


.allsort .subitem
{
    float
: left;
    width
: 500px;
    min-height
: 370px;
    padding
: 0 4px 0 8px;
}


.subitem.left
{
    float
:left ;
    width 
:550px;
    height 
:70px;
    display
: none;
    position
: absolute;
    
}
.allsort .subitem dl
{
    border-top
: 0px solid #f6b704;
    padding
: 6px 0;
    overflow
: hidden;
    zoom
: 1;
}

.allsort .subitem .fore
{
    border-top
: none;
}
/* 二级菜单控制*/
.allsort .subitem dt
{
    float
: left;
    width
:65px;
    line-height
: 22px;
    text-align
: right;
}
.allsort .subitem dd
{
    float
: left;
    width
: 380px;
}
/* 二级菜单颜色控制*/
.allsort .subitem dt a
{
    color
: #c00;
}
/*设置功能列表分割标示*/
.allsort .subitem dd a
{
    border-right 
:#f6b704 1px solid;
      border-left
::#f6b704 1px solid;
    padding
: 0 5px;
    margin-bottom
: 5px;
    text-decoration
: underline;
    display
: inline-block;
    line-height
: 15px;
}
/*去掉后会换行    
.allsort .subitem em
{
    float: left;
    height: 14px;
    margin: 4px 0;
    line-height: 14px;
    padding:  0 10px;
    border-left: 0px solid #f6b704;
}    
*/

#o-search .allsort .subitem dt a
{
    color
: #c00;
   
}
#o-search .allsort .subitem dd a
{
    white-space
: pre-wrap ;
}
.allsort .fr
{
    background
: #fff;
    width
: 176px;
    padding-bottom
: 2010px;
    margin-bottom
: -2000px;
}
.allsort .fr dl
{
    padding-bottom
: 0;
}
#o-search .allsort .fr a
{
    color
: #666;
}
.allsort .brands
{
    width
: 140px;
    padding
: 6px 8px;
}
.allsort .brands em
{
    float
: left;
    width
: 80px;
}
.allsort .brands dd
{
    padding-top
: 6px;
    line-height
: 20px;
}
.allsort .promotion
{
    width
: 140px;
    padding
: 6px 8px;
}


.allsort .promotion dd
{
    padding-top
: 6px;
    line-height
: 20px;
}
.allsort .mc .extra
{
    padding
: 7px 8px;
    background
: #FDF1DE;
    border-top
: 0px solid #f6b704;
}


#o-search .allsort .mc .extra a
{
    color
: #c00;
}
/*w为负数时鼠标移上后会会出现底线。*/
.allsorthover
{
    background-position
: 0  166px;
}
.allsorthover .mt .extra
{
    background-position
: -274px -190px;
}
.allsorthover .mc
{
    display
: block;
}
.allsort .hover span
{
    z-index
: 13;
    width
: 140px;
}
/* 鼠标移动上去后大菜单变化样式*/
.allsort .hover h3
{
    border
: solid #f6b704;
    border-width
: 1px 0 1px 1px;
    overflow
: hidden;
    background
: #FFF9EF no-repeat -318px -172px;
    font-weight
: bold;
}
.allsort .hover s
{
    display
: none;
}
.allsort .hover .i-mc
{
    display
: block;
    z-index
: 12;
}
*html .allsort .item dd
{
    padding-bottom
: 6px;
}

调查研究表明:1、人们担忧的事情40%从未发生过;2、30%的忧虑是过去发生过的事情,是无法改变的;3、12%的忧虑集中于别人出于自卑感而作出的批评,这些忧虑是多余的;4、10%的忧虑是那些琐碎的事情;5、只有8%的忧虑可以列入“合理”的范围,而8%当中有4%的事情是完全不能控制的。

85%的快乐由人际关系决定,仅15%的快乐来自于个人成就。人95%的时间是无聊、苦闷、孤独、落寞、烦闷、平淡的,只有5%的时间是风光的。所以,我们要学会处理好人际关系,学会忍受平淡无奇的生活。

 

 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!