Мой одностраничный веб-сайт не работает.я подключил его к списку через HREF, но мой сайт все еще не подходит.Я пытаюсь продублировать по-своему, закодировав код ниже
https://codepen.io/bassta/pen/Eicla?editors=1111 Пожалуйста, помогите, если можете.
<html> <head> <script>$(function() {
//Image by Ivaylo Yovchev ( http://ivayloyovchev.com/weddings )
//elements
var $menu = $(".menu");
var $pages = $(".page");
var $menuLi = $menu.find("li").not(".to-home");
var $toHome = $menu.find(".to-home");
//interna vars
var currentPage = "";
$toHome.on("click", function() {
currentPage = "";
TweenMax.to($pages, 0.5, {
left: "-70%"
});
TweenLite.to($menuLi.filter(".active"), 0.5, {
className: "-=active"
});
});
$menuLi.on("click", function(event) {
var $this = $(this);
var thisHref = $this.find("a").attr("href");
if (currentPage !== thisHref && $pages.filter(thisHref).length > 0) {
currentPage = thisHref;
TweenMax.to($pages, 0.5, {
left: "-70%"
});
TweenMax.to($pages.filter(thisHref), 0.5, {
left: 0
});
TweenLite.to($menuLi.filter(".active"), 0.5, {
className: "-=active"
});
TweenLite.to($this, 0.5, {
className: "+=active"
});
}
event.preventDefault();
});
});</script><style>
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ol {list-style:none;
width:200px;
}
ul li {
box-shadow: 6px 6px 2px 1px #FFEF99;
border-radius: 5px;
float: right;
width: 240px;
height: 40px;
background-color: black;
opacity: .4;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 8px;
}
ul li a {
text-decoration: none;
color: gold;
}
ul li a:hover {
background-color: red;
display: block;
border-radius: 5px;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.page{
background-color:red;
}
.page-content{background-color:red;}
</style> </head><body><ul>
<li style="width: 140px;"><a href="#Home">Home</a></li>
</ul>
<ul>
<li style="width: 140px;"><a href="#Product">Product</a>
<ul>
<li style="width: 140px;"><a href="Product1">Product1</a></li>
</ul>
</li>
</ul>
<ul>
<li style="width: 140px;"><a href="Comb">Comb</a>
<ul>
<li style="width: 140px;"><a a href="Lorem"></a>Lorem</li>
</ul>
</li>
<ul>
<li style="width: 140px;"><a a href="Brush">Brush</a>
<ul>
<li style="width: 140px;"><a a href="Clip">Clip</a></li>
</ul>
</li>
<ul>
<li style="width: 140px;"><a href="Contact Us">Contact Us</a>
<ul>
<li style="width: 140px;"><a href="About us">About Us</a></li>
</ul>
</li>
<ul>
<li style="width: 140px;"><a href="Testimonials">Testimonials</a>
<ul>
<li style="width: 140px;"><a href="Terms"></a></li>
</ul>
</li>
<div id="aboutus" class="page">
<div class="page-content">
<h2>Lorem</h2>
<p>lorem</p>
</div>
</div>
<div id="gallery" class="page">
<div class="page-content">
<h2>"Neque porro quisquam</h2>
<p> dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p>
</div>
</div>
<div id="Product" class="page">
<div class="page-content">
<h2>est qui dolorem ipsum quia </h2>
<p>make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div id="Contactus" class="page">
<div class="page-content">
<h2>Contacts</h2>
<p>Some contact form</p>
</div>
</div>
</body> </html>
Мой одностраничный веб-сайт не работает.я подключил его к списку через HREF, но мой сайт все еще не подходит.Я пытаюсь продублировать по-своему, закодировав код ниже