Imitation QQ2003 style navigation bar

xiaoxiao2021-03-06 66

This is a website navigation bar made in December 2003. I originally wanted to change to OOP and put it up. It seems that it is impossible to achieve this year, first publishing again. See the right picture, it consists of two scripts and HTML pages, the following is the detailed code, the demo can be downloaded from http://www.freewebs.com/kacarton/software/outlookbar.rar(7k): Script supports code Outlookbar. JS content: / * =============================================== =================================================200312-2004-3 Site: http://kacarton.yeah.net / Blog: http://blog.9cbs.net/nhconch email: kacarton@sohu.com

The article is the author original. Please contact him before reprinting, reprint, please indicate the article, retain the author information, thank you for your support! ============================================================================================================================================================================================================= ====================== * / var bar_open = false; var active_bar = null; var timer = null;

Function bar_click (obj) {var bar = document.getlementBYID ("first_bar"); if (bar == null || obj == null) return; bar = bar.nextsibling; while (bar) {if (bar.extend! = "Menubar") bar.style.display = "none"; bar = bar.nextsibling;} active_bar = obj; obj.nextsibling.style.display = 'block'; scrollbutton_moveto;}

function Item_Click (obj) {if (obj == null) return; mainfrm = document.getElementById ( "main"); mainfrm.src = obj.href;} function Item_MouseDown (obj) {obj.style.borderWidth = 1; obj .Style.BordertopColor = "# 666666"; obj.style.borderbottomcolor = "# fff"; obj.style.borderleftColor = "# 666666"; obj.style.BorderrightColor = "# fffffff";

Function item_mouseup (obj) {item_mouseover (obj);

function Item_MouseOver (obj) {if (obj == null) return; obj.style.borderWidth = 1; obj.style.borderTopColor = "# FFFFFF"; obj.style.borderBottomColor = "# 666666"; obj.style.borderLeftColor = "# Ffffff"; obj.style.BorderrightColor = "# 666666";

Function item_mouseout (obj) {if (obj == null) return; obj.style.Borderwidth = 0;}

Function scrollStart (STEP) {if (active_bar == null) return; var obj = active_bar.nextsibling.children [0] .children [0]; if (obj == null) return; obj.scrolltop = step; if (Obj .scrollTop> 0 && obj.scrollTop obj.offsetHeight

Function addbar (capen) {if (bar_open) Barend (); bar_open = true; document.write (" / n" / N " " caption " / n" " / N " " / n" "

" "");

Function Barend () {document.write (" / N"); bar_open = false;} function additem (caption, href) {if (caption == null || href == null) return; document.write ( "

caption / n ");

Function showfirst () {var bar = document.getlementByid ("first_bar"); if (bar == null) return; bar = bar.nextsibling; while (bar && bar.extend! = "menubar") bar = bar.nextsibling ; If (bar.extend == "menubar") bar_click (bar);

Function showoutlookbar () {document.write ("

/ n" "

/ n"); showitems (); if (bar_open) barend (); Document.write (" / N " " / n " " / n "); showfirst ();} Navigation content script code menubar.js (change Navigation content changes this file): Function showItems () {addbar ("Personal Information); AddItem (" Modify Information "," 1.HTM "); AddItem (" My Website "," http: // Kacarton .yah.net "); AddItem (" Personal) Works "," http://blog.9cbs.net/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," HTTP: / /BLOG.9CBS.NET/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net/ "); AddItem (" My Website "," http://kacarton.yeah.net "); additem ("

Personal Works "," http://blog.9cbs.net/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Works "," HTTP: //blog.9cbs.net/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net / NHCONCH "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net/nhconch "); AddItem "My Website", "http://kacarton.yeah.net"); AddItem ("Personal Work", "http://blog.9cbs.net/nhconch"); AddItem ("My Website", " http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net/nhconch "); AddItem (" My Website "," http: //kacarton.yeah .NET "); AddItem (" Personal Work "," http://kacarton.yeah.net "); AddItem (" My Website "," http://kacarton.yeah.net "); additem (" Personal Works "," http://blog.9cbs.net/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," HTTP: / /BLOG.9CBS.NET/nhconch "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net/ "); AddItem (" My Website "," http://kacarton.yeah.net "); AddItem (" Personal Work "," http://blog.9cbs.net/nhconch "); additem (" ======== "," CHAN Gepsw.asp "); AddBar (" Supply Information "); AddItem (" Supply Information 1 "," 1.HTM "); AddItem (" My Information 1 "," 2.HTM "); addbar (" requirements information "); AddItem (" Demand Information 2 "," 3.htm "); AddItem (" My Information 2 "," 4.htm "); AddBar (" Cooperation Items "); AddItem (" Requirements Information 2 ", "3.htm"); AddItem ("My Information 2", "4.htm"); AddBar ("Talent Column");

AddItem ("Demand Information 2", "3.htm"); AddItem ("My Information 2", "4.htm"); AddBar ("Talent Column"); AddItem ("Requirements Information 2", "3. HTM "); AddItem (" My Information 2 "," 4.htm "); AddBar (" Test Column "); AddItem (" Test Column "," 3.HTM "); AddItem (" Test Column "," 4.HTM "); AddBar (" Test Column "); AddItem (" Test Column "," 3.htm "); AddItem (" Test Column "," 4.htm "); AddBar (" Test Column); AddItem ("Test Columns", "3.HTM"); AddItem ("Test Column", "4.htm"); AddBar ("Test Column"); AddItem ("Test Column", "3.htm"); AddTem ("Test Columns", "4.HTM"); AddBar ("Test Column"); AddItem ("Test Column", "3.HTM"); AddItem ("Test Column", "4.htm"); Addbar ("Test Column"); AddItem ("Test Column", "3.htm"); AddItem ("Test Column", "4.htm");} Demo page OutlookBar.htm content: Member Center </ Title> <link href = "../ css / css.css" Rel = "stylesheet" type = "text / css"> <script language = "javascript" src = "../ LIB / "javascript" src = "javascript" src = "javascript" src = "menuBar.js"> </ script> </ head> <body TopMargin = "0" leftmargin = "1"> <table border = "0" width = "100%" height = 100% cellspacing = "0" cellpadding = "0"> <tr> <td width = 120 valign = top bgcolor = "# f2f2f2" style = "Border: 1 Solid # 5a8aef "> <Table Width =" 100% "height =" 100% "B ORDER = "0" cellpadding = "0" cellspacing = "2" bgcolor = "# 5a8aef"> <TR></p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-84543.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="84543" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.054</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'JHY66819bNk8FKfv_2BybmdxKmTjGjQz38M6LVtjmtcYnz7wHG558WfeKWLAIKHS6ZUmqIwxouVDUbw0XoXTyfiw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>