I'm currently working on creating a responsive menu, but unfortunately, I'm facing issues with getting the menu to open. Any assistance or advice would be greatly appreciated.
<navi>
<div class="gizli"><i class="fa fa-bars" style="color:#FFFFFF; border:1px solid #FFFFFF;height:60px;padding :20px;"></i>
<div class="clear"></div>
<ul>
<li><a href="index.html">Main Menu<br /> <small>Main Menu</small></a></li>
<li><a href="about.html">About Us<br /> <small>Learn More</small></a></li>
<li><a href="projects.html">Projects<br /> <small>View Our Projects</small></a></li>
<li><a href="services.html">Our Services<br /> <small>Discover What We Offer</small></a></li>
<li><a href="products.html">Products<br /> <small>Explore Our Products</small></a></li>
<li><a href="techinfo.html">Technical Info<br /> <small>Get Technical Insights</small></a></li>
<li><a href="quote.html">Quote<br /> <small>Request a Quote</small></a></li>
<li><a href="contact.html">Contact<br /> <small>Reach Out to Us</small></a></li>
</ul>
</div>
</navi>
Javascript code snippet:
$(document).ready(function() {
$(".gizli").click(function(){
$(this).next("ul").slideToggle();
});
}
CSS Code excerpt:
/* Design Shack Responsive Menu */
/* Navigation Menu */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
navi { right:15%; margin: 0 auto; overflow: hidden;}
navi ul {list-style:none;overflow:hidden;padding-right:4%;padding-left:4%;}
navi .clear{clear:both;}
navi li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
height:80px;
/* TRANSITIONS */
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/* HOVER Effect */
navi li a:hover {
background: #222;
}
/* SMALL Details */
navi small {
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
color: #aaa;
}
/* Blue Menu Styling */
navi .blue {
margin-top: 50px;
}
.blue li a {
background: #75b1de;
}
/* Hidden Menu Toggle Button Styling */
navi .gizli{
height:0;
}
navi .gizli a{
padding-left:0;
}
.blue small {
color: white;
}
.blue li a:hover {
background: #444;
}
/* RED MENU Styling */
navi .red {
margin-top: 50px;
}
.red li a {
background: #5C0002;
}
.red small {
color: white;
}
.red li a:hover {
background: #a60306;
}
/* MEDIA QUERIES for Responsiveness */
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
navi li a {
font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
navi small {
font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
}
}
... <!-- The CSS media queries continue, ensuring responsiveness up to the specified breakpoints -->
I seem to be experiencing some difficulties implementing my design according to the CSS file provided, especially around the 580px mark. Your help in resolving these issues would be highly appreciated. Thank you!