Каким должен быть «rel» для этого javascript? - PullRequest
Новая
       46

Каким должен быть «rel» для этого javascript?

0 голосов
/ 30 марта 2019

Все это прекрасно работает в предварительном просмотре здесь, но когда он работает в любом другом программном обеспечении, javascript не связывается - я знаю это из-за двух вещей:

  1. Точно так же, как с javascript, так и без него.
  2. Он просто не делает то, что должен был сделать - javascript предназначен для того, чтобы все элементы отключались при нажатии на кнопку меню, но здесь ничего этого не происходит.

Я попытался сделать rel = "script", но это ничего не делает. 

var open = false;

function Drop(n) {
	var i;
	if (open == false) {
		for (i = n; i < 5; i++) {
			Drp(i)
		}
		open = true
	} else if (open == true) {
		for (i = n; i < 5; i++) {
			Cls(i)
		}
		open = false
	}
}

function Drp(n) {
	var elem = document.getElementsByClassName("menu-con")[n];
	var pos = -1 * window.innerHeight - n * 100;
	var id = setInterval(frame, 5);

	function frame() {
		if (pos >= -10) {
			clearInterval(id);
			elem.style.top = 0 + 'px';
		} else {
			pos += 10;
			elem.style.top = pos + 'px';
		}
	}
}

function Cls(n) {
	var elems = document.getElementsByClassName("menu-con")[n];
	var poss = 0;
	var ids = setInterval(frames, 5);

	function frames() {
		if (poss <= -1 * window.innerHeight) {
			clearInterval(ids);
			elems.style.top = -1 * window.innerHeight + 'px';
		} else {
			poss += -7 - n * 2;
			elems.style.top = poss + 'px';
		}
	}
}
* {box-sizing: border-box;max-width: 100%;font-family: 'Gruppo', cursive;}
html,body {height: 100%;margin: 0;padding: 0;background:rgb(240,240,240)}

.menu-icon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
.menu-bar {width: 50px;height: 5px;background: rgb(190,190,190);position: absolute;transition: all 0.3s;}
.menu-bar1 {margin-top: 9px}
.menu-bar2 {margin-top: 23px}
.menu-bar3 {margin-top: 37px}
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
.menu-icon.hover .menu-bar2 {opacity: 0}
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}

.menu {width: 100%;height: 100%;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.menu-con {-webkit-flex-grow: 1;flex-basis: 0;flex-grow: 1;display: -webkit-flex;display: flex;-webkit-justify-content:space-around;position:relative;top:-100%;transition:all 0.5s}
.menu-con p:before {content: ""; display: block;position:absolute;top:0;left:0;z-index:1;width:100%;height: 100%;opacity: 1;background: rgba(0,0,0,0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-con:hover p:before {background: rgba(0,0,0,0.2)}
.menu-con p {height:20px;-webkit-align-self:center;color:white;font-size:25px;z-index:2;cursor:pointer}
@media screen and (max-width: 600px) {.menu-con {min-width:50%}}
@media screen and (max-width: 350px) {.menu-con {min-width:100%}}
<link href=style.css rel="stylesheet">
<link href="main.js">
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)">
	<div class="menu-bar menu-bar1"></div>
	<div class="menu-bar menu-bar2"></div>
	<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
	<div class="menu-con" style="background:IndianRed;"><p>HOME</p></div>
  <div class="menu-con" style="background:rgb(160,160,170);"><p>GALLERY</p></div>  
  <div class="menu-con" style="background:mediumseagreen;"><p>PRODUCTS</p></div> 
  <div class="menu-con" style="background:teal;"><p>ABOUT</p></div> 
  <div class="menu-con" style="background:rgb(70,70,70);"><p>CONTACT</p></div>
</div>

Ответы [ 2 ]

5 голосов
/ 30 марта 2019

Вы можете включить свой файл JavaScript следующими способами. В этих примерах показано, как импортировать скрипт, используя элемент <script> в HTML4 и HTML5 ( Элемент Script - Базовое использование ): 

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="main.js"></script>

Мое предложение будет заключаться в следующем HTML5: 

<script src="main.js"></script>

Элемент сценария HTML используется для встраивания или ссылки на исполняемый код; это обычно используется для встраивания или ссылки на код JavaScript.

Источник: Элемент Script

Ссылка используется для таблиц стилей, вы можете прочитать здесь: HTML-ссылка Тег

1 голос
/ 30 марта 2019

Чтобы включить JS, вы должны использовать 

<script type="text/javascript" src="main.js"></script>
...