2
Я создал отзывчивое меню навигации, но на планшетах он имеет проблему с двойным нажатием. Когда вы нажимаете основной заголовок, он перезагружает страницу, прежде чем вы сможете щелкнуть подзаголовок. Я пробовал несколько плагинов jquery, но они не отображают Flexslider под моей навигационной панелью (я не знаю, скрывают ли они это или что происходит). Есть какие нибудь идеи как это починить? БлагодаряНавигация по двойному нажатию
Codepen: http://codepen.io/caguilera0001/pen/jrBgdG (мой гибкий слайдер не отображается в коде пера, к сожалению)
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshowSpeed: 4000,
});
});
//to hide the control arrows
$('#carousel-home').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 170,
itemMargin: 5,
asNavFor: '#slider',
start: function(slider) {
//HIDE THE ARROWS BY DEFAULT...
$('#slider .flex-direction-nav').css({
visibility: 'hidden'
});
//THEN INSERT YOUR CUSTOM JQUERY CLICK ACTIONS TO REVEAL THEM AGAIN
slider.find('a').on('click', function() {
$('#slider .flex-direction-nav').css({
visibility: 'visible'
});
});
} //end start function
}); //end carousel
$('#slider').flexslider({
slidshow: false,
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
sync: "#carousel-home"
}); //end slidera {
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
a,
a:hover {
text-decoration: none;
}
#nav {
margin-left: auto;
margin-right: auto;
height: 30px;
width: 100%;
position: absolute;
z-index: 2;
padding-left: 10%;
padding-right: 10%;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/
background-color: #4484CE;
}
#nav > a {
display: none;
z-index: 99;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
/* first level */
#nav > ul {
height: 30px;
/* 60 */
background-color: #93C178;
list-style: none;
padding: 0;
}
#nav > ul > li {
width: 12.5%;
height: 30px;
float: left;
}
#nav > ul > li > a {
height: 30px;
font-size: 14px;
line-height: 2.5em;
/* 60 (24) */
text-align: center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color: #FFF;
border: 1px solid #4484CE;
text-shadow: 1px 1px 1px #000;
}
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
background-color: #F9CF00;
}
/* second level */
#nav li ul {
background-color: #93C178;
display: none;
position: absolute;
top: 100%;
list-style: none;
padding: 0;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not(:first-child):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 14px;
/* 20 */
text-align: center;
border-top: 1px solid #4484CE;
padding: 0.75em;
/* 15 (20) */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color: #FFF;
border: 1px solid #4484CE;
text-shadow: 1px 1px 1px #000;
font-size: 14px;
}
#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
background: #FCFCFC;
color: #465C8B;
}
////Flexslider Css////
@font-face {
font-family: 'flexslider-icon';
src: url('flex slider /fonts/flexslider-icon.eot');
src: url('flex slider /fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('flex slider /fonts/flexslider-icon.woff') format('woff'), url('flex slider /fonts/flexslider-icon.ttf') format('truetype'), url('flex slider /fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* ====================================================================================================================
* RESETS
* ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* ====================================================================================================================
* BASE STYLES
* ====================================================================================================================*/
.flexslider {
margin: 0;
padding: 0;
background: none;
z-index: 1;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
height: 100%;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
}
/* ====================================================================================================================
* DEFAULT THEME
* ====================================================================================================================*/
.flexslider {
margin: 0px;
padding-top: 60px;
padding-left: 150px;
padding-right: 150px;
border: 4px solid #4484CE;
position: relative;
zoom: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
background: none;
z-index: 1;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
-moz-user-select: none;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.carousel li {
margin-right: 5px;
}
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
padding-left: 150px;
padding-right: 150px;
padding-bottom: 200px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-direction-nav .flex-prev {
left: -50px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
z-index: -1;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: none;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-moz-user-select: none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-prev {
display: none;
}
.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-next {
display: none;
}
/* ====================================================================================================================
* RESPONSIVE
* ====================================================================================================================*/
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}
@media screen and (max-width: 640px) {
.flexslider {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="index.html">Home</a>
</li>
<li><a href="/"><span>About Us</span></a>
<ul>
<li><a href="principal's_message.html">Principal's Message</a>
</li>
<li><a href="mission_and_vision.html">Mission and Vision</a>
</li>
<li><a href="our_history.html">Our History</a>
</li>
<li><a href="staff_directory.html">Staff Directory</a>
</li>
<li><a href="links.html">Links</a>
</li>
<li><a href="photo_gallery.html">Photo Gallery</a>
</li>
</ul>
</li>
<li> <a href="/"><span>School Offices</span></a>
<ul>
<li><a href="attendance_office.html">Attendance</a>
</li>
<li><a href="counseling_office.html">Counseling</a>
</li>
<li><a href="main_office.html">Main</a>
</li>
<li><a href="magnet_office.html">Magnet</a>
</li>
<li><a href="bridge_office.html">Bridge</a>
</li>
<li><a href="english_learner's_office.html">EL</a>
</li>
<li><a href="itd_office.html">ITD</a>
</li>
<li><a href="library.html">Library</a>
</li>
<li><a href="parent_center.html">Parent Center</a>
</li>
<li><a href="nurse's_office.html">Nurse</a>
</li>
<li><a href="safety_ofifice.html">Safety</a>
</li>
<li><a href="plant_manager's_office.html">Plant Manager</a>
</li>
<li><a href="cafeteria.html">Cafeteria</a>
</li>
<li><a href="student_store.html">Student Store</a>
</li>
</ul>
</li>
<li> <a href="/"><span>Academics</span></a>
<ul>
<li><a href="classes_homework.html">Classes/Homework</a>
</li>
<li><a href="culmination_requirements.html">Culmination</a>
</li>
<li><a href="departments.html">Departments</a>
</li>
<li><a href="counseling_office.html">Counseling</a>
</li>
<li><a href="library.html">Library</a>
</li>
</ul>
</li>
<li> <a href="/"><span>Programs</span></a>
<ul>
<li><a href="http://www.bancroftib.weebly.com" target="new">IB</a>
</li>
<li><a href="middle_years_programme.html">The Middle Years</a>
</li>
<li><a href="ste[+a]m_program.html">STE[+a]M</a>
</li>
<li><a href="performing_arts_program.html">Performing Arts</a>
</li>
<li><a href="vei-jv.html">VEI-JV</a>
</li>
<li><a href="gate_sas_program.html">GATE/SAS</a>
</li>
<li><a href="http://lacerstars.org/" target="new">LACER</a>
</li>
</ul>
</li>
<li> <a href="/"><span>Students</span></a>
<ul>
<li><a href="cougar_news.html">Cougar News</a>
</li>
<li><a href="bell_schedule.html">Bell Schedule</a>
</li>
<li><a href="classes_homework.html">Classes/Homework</a>
</li>
<li><a href="dress_code.html">Dress Code</a>
</li>
<li><a href="cougar_code.html">Cougar Code</a>
</li>
<li><a href="attendance_policy.html">Attendance Policy</a>
</li>
<li><a href="culmination_requirements.html">Culmination</a>
</li>
<li><a href="http://www.bancroftib.weebly.com/learner-profile.html" target="new">IB Learner Profile</a>
</li>
<li><a href="http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">Student Handbook</a>
</li>
<li><a href="library.html">Library</a>
</li>
<li><a href="map.html">Map</a>
</li>
<li><a href="http://achieve.lausd.net/site/default.aspx?PageType=3&ModuleInstanceID=1555&ViewID=7B97F7ED-8E5E-4120-848F-A8B4987D588F&RenderLoc=0&FlexDataID=16590&PageID=845" target="new">Food Menu</a>
</li>
<li><a href="student_store.html">Student Store</a>
</li>
<li><a href="http://www.bancroftmiddleschool.org/2015-16yearbook/index.html" target="new">Yearbook</a>
</li>
</ul>
</li>
<li> <a href="/"><span>Parents</span></a>
<ul>
<li><a href="parent_bulletin.html">Parent Bulletin</a>
</li>
<li><a href="cougar_news.html">Cougar News</a>
</li>
<li><a href="parent_center.html">Parent Center</a>
</li>
<li><a href="calendar.html">Calendar</a>
</li>
<li><a href="bell_schedule.html">Bell Schedule</a>
</li>
<li><a href="classes_homework.html">Classes/Homework</a>
</li>
<li><a href="culmination_requirements.html">Culmination</a>
</li>
<li><a href="http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">District Handbook</a>
</li>
<li><a href="school_site_council.html">SSC Council</a>
</li>
<li><a href="school_decision_making_council.html">SDM Council</a>
</li>
<li><a href="elac.html">ELAC</a>
</li>
<li><a href="contact_teachers.html">Contact Teachers</a>
</li>
</ul>
</li>
<li><a href="contact.php">Contact Us</a>
</li>
</ul>
</nav>
Что-нибудь еще, что я должен добавить, просто дайте мне знать – Citlalipop