I'm new to coding and I'm experimenting with hamburger-style menu.
What I've achieved: when the user clicks on the hamburger menu icon, it changes into the close icon.
I've added a text label in front of the hamburger menu icon, but the problem is that I don't know how to make this text change the icon when it's clicked.
If you can please advise on this matter.
Many thanks
Best regards,
Veaceslav
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link href="Fontawesome/css/all.css" type="text/css" rel="stylesheet">
<!-- Styles -->
<link href="CSS/stylesheet.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<h1>Logo</h1>
<div class="topnav" id="myTopnav">
<ul class="nav-links">
<input type="checkbox" id="checkbox_toggle"/>
<label for="checkbox_toggle" class="hamburger"><span class="menu_text" onclick="changeIcon(fa-bars)">Menu</span> <i class="fa-solid fa-bars" onclick="changeIcon(this)"></i></label>
<div class="menu">
<li>First</li>
<li>Second</li>
</div>
</ul>
</div>
</div>
</header>
<footer></footer>
</body>
<script src="Bootstrap/js/bootstrap.js"></script>
<script src="JS/menu_icon_toggle.js"></script>
</html>
JS
let changeIcon = function(icon) {
icon.classList.toggle('fa-xmark')
}
You can modifiy you changeIcon function as
let changeIcon = function () {
document.getElementById("text_icon").classList.toggle("fa-xmark");
};
And label tag as
<label for="checkbox_toggle" class="hamburger">
<span
id="menu_text_item"
class="menu_text"
onclick="changeIcon()"
>
Menu
</span>
<i class="fa-solid fa-bars" id="text_icon" onclick="changeIcon()">
</i>
</label>
onClicking menu text/icon don't pass anything, inside changeIcon function you can access icon node using document.getElementById and then toggle the css list
Related
I am creating a navbar for mobile using Bulma. The HTML snippet I used from Bulma for the Navbar is misbehaving by aligning the buttons to the left instead of aligning them to the right. Moreover, I want those buttons to appear on small screens to the right without the Hamburger. Here is what it looks like on small and large screens. I have even tried using columns to align the buttons to the right and make their appearance possible on small screens.
Small Screen
Large Screen
Here's my code for Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.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=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<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>Document</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
You have an extra <div> with a class of "navbar-start" that is not needed and you also need to get rid of class="navbar-menu" as Bulma automatically hides the right side on small devices with this class.
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
I am trying to code a locally saved simple web page. I have implemented the Semantic UI as the css framework. I am Trying to use a similar menu setup as one of their examples. I have the majority coded the same, yet when I click on the menu button the sidebar does not become visible.
var sideBarMenu = $('ui.sidebar');
sideBarMenu
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.main .item', 'show');
<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">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></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=Rye&display=swap" rel="stylesheet">
<link rel="stylesheet" href="SVGPCGen.css">
</head>
<div class="ui fixed main menu" id="menuButton">
<a href="" class="launch icon item">
<i class="sidebar icon"></i>
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item" id="calculate">
<i class="calculator icon"></i> Calculate
</a>
<a class="item" id="save">
<i class="save icon"></i> Save
</a>
<a class="item" id="load">
<i class="upload icon"></i> Load
</a>
</div>
<div class="pusher">
Never Mind, found the problem was missing a class description in Javascript jquery search
For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<div class="row">
{% for post in final_products %}
<div class="col s12 m6 l4">
<div class="card horizontal hoverable z-depth-1-half">
<div class="card-image" id="card_image" style="height:300px">
<img src="{{ post.6 }}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{ post.0 }}</span>
<p>Initial Price €{{ post.3 }}</p>
<p>Discount {{ post.7 }}%</p>
<p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
</div>
<div class="card-action">
Buy
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
//Initialize dropdown
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
The $(document) is a jQuery selector and you did not included a path for the jQuery.
I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.
The line of code should be included before the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The reason why your code did't worked is that Materialize CSS uses jQuery methods.
Found something that i cant understood.
Had a side menu with semantic ui, the dropdown menu from the side menu is not working when i host the file locally, but it is working fine if i put it in jsfiddle
Here is the working jsfiddle https://jsfiddle.net/7rcrx8c4/
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
</head>
<body>
<div id="main" class="ui container">
<div class="ui top attached menu">
<a class="item" id="menu"><i class="sidebar icon"></i>Menu</a>
<div class="right menu">
<a class="item"><i class="user icon"></i>Welcome : Foo</a>
</div>
</div>
<br />
</div>
<div class="ui left vertical sidebar menu">
<div class="item">
<i class="grid layout icon"></i>Menu
</div>
<!-- Master menu -->
<div class="ui dropdown item">
<span class="text"><i class="book icon"></i></span>
<i class="dropdown icon"></i>Master
<div class="menu">
<a class="item">a</a>
<a class="item">b</a>
</div>
</div>
<!-- End master -->
</div>
<script>
$('.ui .dropdown').dropdown({
on: 'hover'
});
$('.ui.left.sidebar').sidebar({
transition: 'overlay'
});
$('.ui.left.sidebar')
.sidebar('attach events', '#menu');
</script>
</body>
</html>
style.css
.ui.sidebar {
overflow: visible !important;
}
Can some one point me where i make a mistake?
Found out the reason,
style.css should be loaded after semantic.css
Thanks all for the time
I am implement mobile website. I am using mobileangularui framework for mobile website. I want to set image in home.html, But i could not set image from image folder.If i put URL of image which is exist in server then it is works. I will show screen shot of code snippet.
Existing output:
home.html
<style>
.bgImage
{
background-image: url('http://www.electricshop.com/editordocs/image/OurTopGiftIdeas231215_978x400.png');
height:330px;
background-position: center center;
}
</style>
<div class="jumbtron scrollable-content">
<div class="bgImage">
</div>
<img src="../images/clocks.jpg">
<img src="http://1.bp.blogspot.com/-NFIfiFmg8SA/Ti0xrNqB4OI/AAAAAAAADno/fB_2wYQBiv4/s1600/silence-between-two-people.jpg">
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<script src="http://localhost:8001/target/target-script-min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left"></div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center color-winni-text" ui-yield-to="title">
<strong>Winni Celebration</strong>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-comment color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<i class="fa fa-home fa-navbar"></i> Docs
<i class="fa fa-github fa-navbar"></i> Sources
<i class="fa fa-exclamation-circle fa-navbar"></i> Issues
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body">
<div class="app-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
When i give
<img src="../images.clocks.jpg">
then it is not works, But i give image url which is exist in server then it is works.
Directory Screen Shot:
Please give me some idea.