Question

我创建了一个包含HTML / CSS的下拉菜单。现在我想把它翻译成JS，这样我就可以轻松地将它嵌入到几个页面上（这是一个静态的网站）。

see working version here左边是HTML版本，就是JS版本。

它工作正常，但我认为它可能更有效，因此添加/删除/重新排序导航会更容易。

这是JS代码：

＆＃13;

Unload Me

＆＃13;

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);

＆＃13;

/*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;
}

＆＃13;

Answer 1

我是laravel开发人员所以这对我来说不是问题。当我不在laravel时，我这样做。我不知道它是否能帮助你，但我的答案就在这里。

假设导航栏的整个代码在nav.html .nav.html中应该没有任何html或body标签，只有导航栏的代码。这可能有助于您在所需的任何页面中包含相同的nav.html。

在目标页面中，这包含在head标签中：

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，使用唯一ID和javascript块创建一个容器，将nav.html加载到容器中，如下所示：

 <div id="navbar_place">

 </div>

 <script>
     $(function(){
        $("#navbar_place").load("nav.html");
      });
 </script>

Answer 2

不是最好的方法，但最快。

首先，您必须生成一个可容纳容器的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代码。要小心，你必须使用逃脱＆＃34; \＆＃34;执行多行字符串。

将HTML下拉列表转换为JS下拉列表

2 个答案: