将HTML下拉菜单翻译为JS下拉菜单[关闭](Translate HTML dropdown to JS dropdown [closed])
我用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.
更多推荐
发布评论