我用HTML / CSS创建了一个下拉菜单。 现在我想将它翻译成JS,这样我就可以轻松地将它嵌入到多个页面中(这是一个静态网站)。
在这里看到工作版本,左边是HTML版本,右边是JS版本。
它工作正常,但我认为它可以更高效,所以添加/删除/重新排序导航会更容易。
这里是JS代码:
var li = '<li>'; var li_s = '<li><span class="menu_section">'; var li_c = '</li>'; var ul_sub = '<ul class="menu_submenu2">'; var ul_c = '</ul>'; var sp_c = '</span>'; /***/ var open ='<div id="menu"><input id="check" type="checkbox" name="menu"/><label for="check"><div class="menu_btn"><div class="patty"></div><div class="patty"></div></div></label><ul class="menu_submenu">'; var end = '</ul></div>'; /***/ var item1 = li + '<a href="#">Menu Item 1</a>' + li_c; var item2 = li + '<a href="#">Menu Item 2</a>' + li_c; var item3 = li + '<a href="#">Menu Item 3</a>' + li_c; var sub1 = li + '<a href="#">Sub Item 1</a>' + li_c; var sub2 = li + '<a href="#">Sub Item 2</a>' + li_c; var sub3 = li + '<a href="#">Sub Item 3</a>' + li_c; var section1 = li_s + 'menu section' + sp_c + li_c; /***/ var label1 = li + '<input id="image" type="checkbox" name="image"/><label for="image" class="menu_label_header"><span class="menu_header">Image</span></label>'; var sub1 = label1 + ul_sub + sub1 + sub2 + sub3 + ul_c + li_c; var section1_all = section1 + item2 + item3 + sub1; document.write (open + item1 + section1_all + end);/*General styles for body*/ body{ margin:0; padding:0; font-family: 'franklin-gothic-urw-con-sc', Helvetica, Arial, sans-serif; background:#ddd; color:#222; } article{ margin:10px; color: grey; } /*Style for the first level menu bar*/ #menu{ position:fixed; top:0; right:0; margin:0; padding:0; background:#333; color:#eee; } #menu_temp{ position:fixed; top:0; right:50%; margin:0; padding:0; background:#333; color:#eee; } /**/ .menu_btn { position: relative; padding: 0.8em 1em; width: 1em; background-color: #FFFFFF; -ms-transition:background-color 0.25s ease-in-out; -webkit-transition:background-color 0.25s ease-in-out; -moz-transition:background-color 0.25s ease-in-out; transition:background-color 0.25s ease-in-out; } .patty { width: 1em; height:0.1em; background-color: #000000; margin: 0.3em 0; } /**/ label{ position:relative; display:block; padding:0; background:#FFF; cursor:pointer; } label:hover, label:hover .menu_btn, input:checked ~ .menu_btn, input:checked ~ label { background:#000000; } input:checked ~ label.menu_label_header { background: #FFFFFF; } label:hover .patty { background-color: #FFF; } input:checked ~ label:after{ border-top:10 solid rgba(255,255,255,.5); border-bottom:0 solid rgba(255,255,255,.5); background-color: #000000; transition:border-top .1s, border-bottom .1s .1s; } input:checked ~ label.menu_label_header:after { background: #000000; } /*hide the inputs*/ input { display:none } /*show the second levele menu of the selected voice*/ input:checked ~ ul.menu_submenu, input:checked ~ ul.menu_submenu2 { max-height:1000px; transition:max-height 0.5s ease-in; } /*style for the second level menu*/ ul.menu_submenu, ul.menu_submenu2 { max-height:0; padding:0; margin:0; overflow:hidden; list-style-type:none; background:#FFFFFF; transition:max-height 0.5s ease-out; position:absolute; right: 0; min-width:100%; } ul.menu_submenu2 { position:relative; } ul.menu_submenu li a, ul.menu_submenu2 li a, .menu_header, .menu_section { display:block; font-family: 'franklin-gothic-urw-con-sc'; font-weight: 400; font-size: 1em; text-transform: lowercase; padding:6px 48px 6px 12px; min-width: 200px; color:#000; text-decoration:none; transition:background .3s; white-space:nowrap; } .menu_header { font-weight: 500; font-size: 1.05em; } .menu_section { color: #000000; font-weight: 500; font-size: .8em; border-top: 1px solid #000000; padding: 9px 48px 3px 12px !important; margin-top: 6px; } ul.menu_submenu2 li a, .border .menu_submenu2 li a { padding:5px 48px 5px 12px !important; } ul.menu_submenu li a:hover, ul.menu_submenu2 li a:hover { background:rgba(0,0,0,.05); } .menu_header:hover { color: #FFFFFF; } input:checked ~ label.menu_label_header:hover { background: #000000 !important; } ul.menu_submenu li { padding: 0; margin: 0 0.975em; } ul.menu_submenu2 li { border-left: 1px solid black; padding: 0; margin: 0 0 0 11px; } ul.menu_submenu li:first-child { padding-top:12px; } ul.menu_submenu2 li:first-child { padding-top:0px; } ul.menu_submenu li:last-child { padding-bottom: 12px; } ul.menu_submenu2 li:last-child { padding-bottom: 0px; margin-bottom: 12px; } .menu_border { border-top: 1px solid #000; margin-top: 6px !important; padding-top: 6px !important; } li.menu_border .menu_section { margin-top: 6px; padding-top: 6px; padding-bottom: 0px; } li.menu_border .menu_header { margin-top: 0px; padding-top: 6px; padding-bottom: 6px; } li.menu_border ul.menu_submenu2 li a { margin-top: 0px; }<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Work Menu</title> <!-- TYPEKIT --> <script src="https://use.typekit.net/nkl1vuv.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="css/style.css"> </head> <body> <article> <script src="js/main_menu.js" type="text/javascript"></script> </article> <div id="menu_temp"> <input id="check_temp" type="checkbox" name="menu"/> <label for="check_temp"> <div class="menu_btn"> <div class="patty"></div> <div class="patty"></div> </div> </label> <ul class="menu_submenu"> <li><a href="#">Menu Item 2</a></li> <li><span class="menu_section">Archive</span></li> <li><a href="#">Menu Item 3</a></li> <li> <input id="image" type="checkbox" name="image"/> <label for="image" class="menu_label_header"> <span class="menu_header">Image</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 2</a></li> <li class="menu_border"> <input id="sub" type="checkbox" name="sub"/> <label for="sub" class="menu_label_header"> <span class="menu_header">Sub</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li class="menu_border"><a href="#">Border menu 4</a></li> <li><a href="#">Menu Item 5</a></li> <li><span class="menu_section">Section</span></li> <li> <input id="sub2" type="checkbox" name="image"/> <label for="sub2" class="menu_label_header"> <span class="menu_header">Sub2</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 5</a></li> <li><a href="#">Menu Item 6</a></li> </ul> </div> </body> </html>I created a dropdown menu with HTML/CSS. Now I would like to translate it to a JS so I can easily embed it on several pages (it’s a static website).
see working version here left is the HTML version, right the JS version.
It works fine, but I think it could be more efficient, so it will be easier to add/remove/reorder the navigation.
here is the JS code:
var li = '<li>'; var li_s = '<li><span class="menu_section">'; var li_c = '</li>'; var ul_sub = '<ul class="menu_submenu2">'; var ul_c = '</ul>'; var sp_c = '</span>'; /***/ var open ='<div id="menu"><input id="check" type="checkbox" name="menu"/><label for="check"><div class="menu_btn"><div class="patty"></div><div class="patty"></div></div></label><ul class="menu_submenu">'; var end = '</ul></div>'; /***/ var item1 = li + '<a href="#">Menu Item 1</a>' + li_c; var item2 = li + '<a href="#">Menu Item 2</a>' + li_c; var item3 = li + '<a href="#">Menu Item 3</a>' + li_c; var sub1 = li + '<a href="#">Sub Item 1</a>' + li_c; var sub2 = li + '<a href="#">Sub Item 2</a>' + li_c; var sub3 = li + '<a href="#">Sub Item 3</a>' + li_c; var section1 = li_s + 'menu section' + sp_c + li_c; /***/ var label1 = li + '<input id="image" type="checkbox" name="image"/><label for="image" class="menu_label_header"><span class="menu_header">Image</span></label>'; var sub1 = label1 + ul_sub + sub1 + sub2 + sub3 + ul_c + li_c; var section1_all = section1 + item2 + item3 + sub1; document.write (open + item1 + section1_all + end);/*General styles for body*/ body{ margin:0; padding:0; font-family: 'franklin-gothic-urw-con-sc', Helvetica, Arial, sans-serif; background:#ddd; color:#222; } article{ margin:10px; color: grey; } /*Style for the first level menu bar*/ #menu{ position:fixed; top:0; right:0; margin:0; padding:0; background:#333; color:#eee; } #menu_temp{ position:fixed; top:0; right:50%; margin:0; padding:0; background:#333; color:#eee; } /**/ .menu_btn { position: relative; padding: 0.8em 1em; width: 1em; background-color: #FFFFFF; -ms-transition:background-color 0.25s ease-in-out; -webkit-transition:background-color 0.25s ease-in-out; -moz-transition:background-color 0.25s ease-in-out; transition:background-color 0.25s ease-in-out; } .patty { width: 1em; height:0.1em; background-color: #000000; margin: 0.3em 0; } /**/ label{ position:relative; display:block; padding:0; background:#FFF; cursor:pointer; } label:hover, label:hover .menu_btn, input:checked ~ .menu_btn, input:checked ~ label { background:#000000; } input:checked ~ label.menu_label_header { background: #FFFFFF; } label:hover .patty { background-color: #FFF; } input:checked ~ label:after{ border-top:10 solid rgba(255,255,255,.5); border-bottom:0 solid rgba(255,255,255,.5); background-color: #000000; transition:border-top .1s, border-bottom .1s .1s; } input:checked ~ label.menu_label_header:after { background: #000000; } /*hide the inputs*/ input { display:none } /*show the second levele menu of the selected voice*/ input:checked ~ ul.menu_submenu, input:checked ~ ul.menu_submenu2 { max-height:1000px; transition:max-height 0.5s ease-in; } /*style for the second level menu*/ ul.menu_submenu, ul.menu_submenu2 { max-height:0; padding:0; margin:0; overflow:hidden; list-style-type:none; background:#FFFFFF; transition:max-height 0.5s ease-out; position:absolute; right: 0; min-width:100%; } ul.menu_submenu2 { position:relative; } ul.menu_submenu li a, ul.menu_submenu2 li a, .menu_header, .menu_section { display:block; font-family: 'franklin-gothic-urw-con-sc'; font-weight: 400; font-size: 1em; text-transform: lowercase; padding:6px 48px 6px 12px; min-width: 200px; color:#000; text-decoration:none; transition:background .3s; white-space:nowrap; } .menu_header { font-weight: 500; font-size: 1.05em; } .menu_section { color: #000000; font-weight: 500; font-size: .8em; border-top: 1px solid #000000; padding: 9px 48px 3px 12px !important; margin-top: 6px; } ul.menu_submenu2 li a, .border .menu_submenu2 li a { padding:5px 48px 5px 12px !important; } ul.menu_submenu li a:hover, ul.menu_submenu2 li a:hover { background:rgba(0,0,0,.05); } .menu_header:hover { color: #FFFFFF; } input:checked ~ label.menu_label_header:hover { background: #000000 !important; } ul.menu_submenu li { padding: 0; margin: 0 0.975em; } ul.menu_submenu2 li { border-left: 1px solid black; padding: 0; margin: 0 0 0 11px; } ul.menu_submenu li:first-child { padding-top:12px; } ul.menu_submenu2 li:first-child { padding-top:0px; } ul.menu_submenu li:last-child { padding-bottom: 12px; } ul.menu_submenu2 li:last-child { padding-bottom: 0px; margin-bottom: 12px; } .menu_border { border-top: 1px solid #000; margin-top: 6px !important; padding-top: 6px !important; } li.menu_border .menu_section { margin-top: 6px; padding-top: 6px; padding-bottom: 0px; } li.menu_border .menu_header { margin-top: 0px; padding-top: 6px; padding-bottom: 6px; } li.menu_border ul.menu_submenu2 li a { margin-top: 0px; }<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Work Menu</title> <!-- TYPEKIT --> <script src="https://use.typekit.net/nkl1vuv.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="css/style.css"> </head> <body> <article> <script src="js/main_menu.js" type="text/javascript"></script> </article> <div id="menu_temp"> <input id="check_temp" type="checkbox" name="menu"/> <label for="check_temp"> <div class="menu_btn"> <div class="patty"></div> <div class="patty"></div> </div> </label> <ul class="menu_submenu"> <li><a href="#">Menu Item 2</a></li> <li><span class="menu_section">Archive</span></li> <li><a href="#">Menu Item 3</a></li> <li> <input id="image" type="checkbox" name="image"/> <label for="image" class="menu_label_header"> <span class="menu_header">Image</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 2</a></li> <li class="menu_border"> <input id="sub" type="checkbox" name="sub"/> <label for="sub" class="menu_label_header"> <span class="menu_header">Sub</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li class="menu_border"><a href="#">Border menu 4</a></li> <li><a href="#">Menu Item 5</a></li> <li><span class="menu_section">Section</span></li> <li> <input id="sub2" type="checkbox" name="image"/> <label for="sub2" class="menu_label_header"> <span class="menu_header">Sub2</span> </label> <ul class="menu_submenu2"> <li><a href="#">Sketches</a></li> <li><a href="#">Ultra Shorts</a></li> <li><a href="#">Micro Animated Gifs</a></li> </ul> </li> <li><a href="#">Menu Item 5</a></li> <li><a href="#">Menu Item 6</a></li> </ul> </div> </body> </html>最满意答案
不是最好的方法,但最快。
首先你必须生成一个单独的html来容纳你的容器,在这里是你的menu_temp容器。
let menu = document.createElement('div'); menu.id = "menu_temp"; menu.innerHTML = "<sample>tons and tons of HTML code here</sample>"; document.body.appendChild(menu);在menu.innerHTML属性中,您必须复制粘贴冗长的html代码。 要小心,你必须使用转义符“\”来执行多行字符串。
Not the best approach, but the quickest.
First you have to generate a single html that would hold your containers, in this case your menu_temp container.
let menu = document.createElement('div'); menu.id = "menu_temp"; menu.innerHTML = "<sample>tons and tons of HTML code here</sample>"; document.body.appendChild(menu);Inside the menu.innerHTML property is where you have to copy paste your lengthy html code. Be wary, you have to use escapes " \ " to perform multi-line strings.
更多推荐
发布评论