I am creating a web based app, and I am using Spring and Angular.
I am writing the front end in the Angular folder, and I have this HTML code to be on every page(app.component.html) - it is a menu:
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" >Home</a>
<a routerLink="/login" >Login</a>
<a routerLink="/register" >Register</a>
</div>
</div>
And I have this as css so it is centered and looking all nice.
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: right;
}
How do I get it to change the color of the buttons(Home, Login, Register) when I am in the current page? (for ex. when I'm in Home page the button will be green, when in Login - it will be green)
You can use routerLinkActive which will add a CSS class to the element when the route is active.
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" routerLinkActive="active-link">Home</a>
<a routerLink="/login" routerLinkActive="active-link">Login</a>
<a routerLink="/register" routerLinkActive="active-link">Register</a>
</div>
</div>
.topnav-right a.active-link {
color: #ff0000;
}
Related
I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>
This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px
I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp
There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.
So i'm new to bootstrap.and i was trying out to change my sidebar into a button when screen size is small.
This is a little what i need. I can tweak around a little bit to make it work for my needs except for one. There is a sidebar with links. That sidebar disapears when you make you screen smaller (as would have happened on mobile devices). I want to make sure that the sidebar disapears but have it back with a button.
Here is my code.
HTML and CSS i am using :
#side-bar {
height: 100%;
background-color: #333f4d;
padding: 0 !important;
font-weight: 600;
color: #d7d9db;
position: fixed;
float: left;
}
#top-bar {
background-color: #1f2730;
padding-top: 15px;
padding-bottom: 3px;
}
#top-bar:hover {
background-color: #aaa;
font-weight: 700;
}
.sidebarclr {
background-color: #fafafa !important;
margin-left: -14px;
}
#logo{
margin-left: 35px;
margin-bottom: 8px;
width:32px;
height:32px;
}
li img{
width:16px;
height:16px;
margin-right: 5px;
}
.list{
text-decoration:none!important;
padding-bottom: 15px;
padding: 10px;
}
#sidebl > li a{
color:#d7d9db !important;
}
#sidebl >li a:hover{
background-color:#aaa !important;
text-decoration:none !important;
}
#sidebl >li a:focus{
background-color:#aaa !important;
text-decoration:none !important;
}
#user{
margin-right: 10px;
margin-left: 10px;
float: left;
}
.userc{
border-radius: 3px;
height:32px;
margin-top:170px;
}
.light{
color: #8f98a3 !important;
font-weight: normal;
font-size:11px!important;
}
.username{
display:inline-block !important;
line-height: 16px;
float: left;
margin-left:5px;
}
.userc:hover{
background-color:#aaa;
text-decoration:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">
<div id="top-bar">
<a href="#" title="home page" target="_blank">
<img id="logo" src="images/logo.png" alt="">
<h2 class="title"> Maven Up</h2>
</a>
</div>
<div>
<ul class="nav" id="sidebl">
<li class="list">
<img src="images/icons/006-dashboard.png" alt=""> DashBoard
</li>
<li class="list">
<img src="images/icons/005-post-it.png" alt=""> Entries
</li>
<li class="list">
<img src="images/icons/004-worlwide.png" alt=""> Globals
</li>
<li class="list">
<img src="images/icons/003-picture.png" alt="">Assets
</li>
<li class="list">
<img src="images/icons/002-users.png" alt=""> Users
</li>
<li class="list">
<img src="images/icons/001-settings.png" alt=""> Setting
</li>
</ul>
</div>
<div class="userc">
<div id="user"><img src="images/user.png" alt=""></div>
<div class="username"> User
<div class="light">admin</div>
</div>
<!--- Navigation Bar User --->
<ul class="nav navbar-nav">
<li class="dropup">
<span class="gaparowup glyphicon glyphicon-chevron-up"></span>
<ul class="dropdown-menu">
<li>Account Settings</li>
<li>User stats </li>
</ul>
</li>
</ul>
<!--- Navigation Bar End --->
</div>
<!--- userc class div end --->
</div>
<!-- COL SM 2 END -->
bootsnipp has some great examples for that. Take a look at one of those. Most of them you can change to mobile versions so that they are only showing the button on mobile.
Maybe this guide helps as well. I really think there are great tutorials out there.
I would like to ask for assistance. So I have multiple modals linked to different buttons. They open fine and display correctly, but do not close at all unless the page is refreshed.
Here is the code:
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal1').style.display='block'">Sign
Up</button></a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal2').style.display='block'">Sign
Up</button></a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal3').style.display='block'">Sign
Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="Modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>1</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>2</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>3</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('Modal1');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('Modal2');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('Modal3');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
And here is the CSS
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
If using bootstrap, you don't need to do this
.style.display='block'
This defeats the whole purpose of you using a framework in the first place. The bootstrap(framework) already handles this for you. All you need to do is give appropriate attributes to your elements so bootstrap recognizes them and does the task.
In your case, to make a modal work. All you need is the data-toggle="modal" and data-target="#Modal1" attributes to the trigger element(your button). These tells the framework to open a modal by the id Modal1 on click of this element.
<li class="grey">
<button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>
Then to close the modal, you need to give the data-dismiss="modal" on your "x" span element(you don't need the class="close" in this case).
<span data-dismiss="modal">×</span>
Alternatively, you could also use javascript to close the modal like so(you don't need the data-dismiss="modal" in this case)
$(".close").on('click', function() {
$('#Modal1').modal('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey">
<button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>
</ul>
</div>
<div id="Modal1" class="modal" data-dismiss="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>1</p>
</div>
</div>
TRY this code
HTML
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal1">Sign
Up</button></a>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal2">Sign Up</button></a>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal3">Sign Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="Modal1" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>1</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal2" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>2</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal3" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>3</p>
</div>
</div>
CSS
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
remove your JS File and give a try
Hope this helps.
Use the following code:
$('.modal').modal('hide');
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/
Welp... I'm stuck... again...
(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.)
I am in the process of making my homepage more mobile / smaller screen sizes freindly. One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it:
A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B. Have a TRANSPARENT background for both the hamburger menu and the navbar.
B1. Keep my navbar's color-scheme
C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide.
I know that I am asking a lot, but hopefully someone will be able to help me. As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. Also, sorry for the messy code.
JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output
Code:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><i class="fa fa-home fa"></i> Lore</li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
I see that you are already using Bootstrap. Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Below I have put in their navbar structure into your existing code. I have taken out the menu css that you had and added just a couple of lines of css to get you started. You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. Inside of it is a navbar-header and a navbar-collapse. In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. So when you get to the 767 px it will be hidden until you click on the hamburger. This is all built into Bootstraps framework making it very easy for developers to get started on their sites. I hope this helps. Here is your revised code you should be able to just copy and paste this as is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
#media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm not sure anyone is going to write the code for you, but we can point you in the right direction. What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. They look like this:
#media screen and (max-width: 1199px) {...}
I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link.
http://codepen.io/mhodges44/pen/dGMMOK
You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. That should give you a pretty good idea of how it all works and you should be able to apply it to your situation.