Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Related
im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>
HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>
I'm building an HTML chat app template, and I ran into two major issues when trying to complete it.
The chat names on the side are not showing ellipses despite me using text-overflow: ellipse;
When anyone of the chats are clicked, I would like them to stay on an active color until I click on another one, but I'm not sure how to go about it.
Here's my HTML and CSS:
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active{
background-color:rgb(122, 184, 235);
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
What should I do? Thanks.
You probably have to use javascript to achieve this. The default functioning for the :active state is to snap back to the :hover state as soon as you click and release the mouse button.
.sidebar > .group-chats > div:active {
background-color: red;
}
If you remove the :hover state you'll make it stay red, but it's as far as I am concerned impossible to keep :active as long as :hover immediately takes over once the click is finished.
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,
.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
Edit: Forgot your ellipsis question. For this to work your element has to have a width. However, I am not able to solve it, your markup and css are confusing and adding width to what I think is the correct element doesn't work.
Edit 2: You could try a JS solution like this to make the active background color stick when you click the chat room divs. I have simplified. You can change this to use the container class that you already have and just add a unique class to all the divs inside of it that you want to make work with this JS:
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click', (e) => {
activeState(e)
})
div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,
div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}
<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>
I want to use mmenu plugin on asp.net mvc at home \ index page. For this, I included the plugin in my adminLTE v.3 (bootstrap v4) themed project. But when the plugin works, it takes over the body and the menu starts working right inside the body. But where it should work is home \ index. What kind of setting should I make for this? I want help from those who use this plugin.
***UPDATED Paint drawn exactly what I want
my original AdminLTE template;
mispositioned mmenu;
original mmenu
The styles that mmenu creates inside the body of asp.net mvc
Home\Index.cshtml
#{
ViewBag.Title = "Index";
}
<link type="text/css" rel="stylesheet" href="~/mmenu/demo/css/demo.css" />
<link type="text/css" rel="stylesheet" href="~/mmenu/dist/mmenu.css" />
<div id="page">
<div class="header">
<span></span>
Demo
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the menu icon to open the menu.
</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>
<span>About us</span>
<ul>
<li>History</li>
<li>
<span>The team</span>
<ul>
<li>
Management
</li>
<li>
Sales
</li>
<li>
Development
</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
<li class="Divider">Other demos</li>
<li>Advanced demo</li>
<li>One page demo</li>
</ul>
</nav>
</div>
#section Scripts
{<script type="text/javascript">
$(document).ready(function () {
const menu = new Mmenu(
document.querySelector('#menu')
);
});
</script>
}
<script src="~/mmenu/dist/mmenu.polyfills.js"></script>
<script src="~/mmenu/dist/mmenu.js"></script>
_Layout.cshtml
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>#ViewBag.Title - Merinos Tablet</title>
<!-- Font Awesome Icons -->
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
#Html.Partial("_Header")
#Html.Partial("_Sidebar")
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">#ViewBag.Title</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
#Html.ActionLink(#ViewContext.RouteData.Values["controller"].ToString(),
#ViewContext.RouteData.Values["action"].ToString(), #ViewContext.RouteData.Values["controller"])
</li>
#*#if (#ViewContext.RouteData.Values["controller"].ToString() != "Dashboard" ||
#ViewContext.RouteData.Values["action"].ToString() != "Dashboard")
{
}*#
<li class="breadcrumb-item active">#ViewBag.Title</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
#RenderBody()
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
#Html.Partial("_Footer")
#Html.Partial("_Aside")
</div>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/adminlte/js")
#RenderSection("scripts", required: false)
</body>
</html>
mmenu.demo.css
.header,
.content,
.footer {
text-align: center;
}
.header,
.footer {
background: #4bb5ef;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 44px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 50px;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.header a {
display: block;
width: 28px;
height: 18px;
padding: 11px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,
.header a:after {
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span {
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content {
padding: 150px 50px 50px 50px;
}
I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About us</a></li>
<li><a href="pages/contact.html">How to reach me</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
</ul>
</nav>
<section class="sm">
<a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
<a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
<a href="#"><i class="fab fa-google" class="google"></i></a>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
function openBtn() {
document.getElementsByName("nav").style.width = "40vw";
document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
document.getElementsByName("nav").style.width = "0";
document.getElementsByName("nav").style.height = "0";
}
closeNav();
I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
I am new to HTML, CSS, and Jquery.
I created the following code for a Material Design Lite (MDL) "card."
Problems: The card will currently resize, but only the space above the title and I need the supporting text section to expand. I also need the supporting text section to expand dynamically only far enough to show all of its' text on the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.article_card {
width: 95%;
height: 200px;
background-color: white;
text-align: left;
scroll-behavior: smooth
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
height: 70px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".article_card").click(function() {
var newHeight = 900
if ($(".article_card").height() != 200)
$(".article_card").animate({
height: 400
}, 500);
else
$(".article_card").animate({
height: newHeight
}, 500);
});
</script>
</body>
</html>
Instead of altering the height of the entire .article_card, animate the height of the .mdl-card__supporting-text element. This will cause the entire .article_card to expand in height to show the contents of .mdl-card__supporting-text.
Since we want to animate the height to fit the dynamic content, we'll use max-height instead of height in order for the animation to work.
$(".article_card").click(function() {
if ($(this).height() > 220 ) {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '75px'
}, 500);
} else {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '1000px'
}, 500);
}
});
.article_card {
width: 95%;
background-color: white;
text-align: left;
scroll-behavior: smooth;
padding-top: 0px;
position: relative;
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
max-height: 75px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>