In my website I have created a NavBar file and I include it, with php, in every other php file I want. Now my navbar file has a dropdown inside:
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: white;
z-index: 1;
cursor: pointer;
}
.dropdown-inbuttons {
border: none;
padding: 6px 12px;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: white;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: white;
min-width: 160px;
box-shadow: white;
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="w3-top">
<div class="w3-bar w3-black w3-card" style="height: 58px">
<!-- Give attension here -->
//.....other code....//
<div class="dropdown" style="margin-top: 6px;">
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Log Out
</div>
</div>
</div>
</div>
When I put my mouse up to the dropbtn it shows me this:
I know why this happen because the dropdown content is inside the navbar and in the code navbar height = 58px and doesn't fit. So How to make my dropdown visible front of the other html files?
I import the navbar in other php files with this way:
<html>
<?php
session_start();
if(!isset($_SESSION['u_id'])){
header("Location: ../../login.php");
}
include '../../_includes/server.php';
$userid = $_SESSION['u_id'];
$usersql = "SELECT * FROM `users` WHERE id='$userid'";
$result = mysqli_query($conn, $usersql);
if($row = mysqli_fetch_assoc($result))
{
$_SESSION['first_name'] = $row['first_name'];
$_SESSION['last_name'] = $row['last_name'];
include('../../../navBar/navBarConnected.php'); <!-- Here I include it-->
}
<head>...</head>
<body>...</body>
</html>
First approach: Override overflow:hidden of .w3-bar by overflow:visible.
Second approach: Change position: relative of .dropdown class to position: static and wrap the <div class="dropdown">...</div> to another div and add position: relative to that.
Both of them will work. Choose whatever suits you.
.dropbtn {
background-color: transparent;
color: #fff;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.bar {
background: black;
color: #fff;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: transparent;}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="bar">
//.....other code....//
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
Related
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
I'd like to create a dropdown menu from the profile section of the navbar. How can I do that?
I've tried looking it up but I didn't found any good sulotion that fits my ides. (I'd like this dropdown menu to contain 2 items.)
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li>Profile</li>
</ul>
</div>
not that much stylish but like regular ones you see on other websites
also don't forget to run it on your own browser
try to make it responsive
you are using "px" that is not a good idea for declaring measures
try to use "vh" for height and "vw" for width
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
.dropdown {
position: absolute;
height: 0;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
width: 40vw;
top: 120px;
display: flex;
z-index: -1;
flex-direction: column;
right: 10%;
background-color: #454552;
}
.profile:hover .dropdown{
height: 10vh;
opacity: 1;
pointer-events: all;
top: 100px;
z-index: 1;
}
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="author" content="Farkas">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li class="profile">Profile
<ul class="dropdown">
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but
i used other program and now it's working
after checking network tab i saw that css file appear after some time and when it appear
it has an old version of it im not sure why but i used PhpStorm and then i make localhost
using PhpStorm and now it's working thank you for people tried to help me :)
I have a problem like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
This code is working very well in independently.But when i integrate it with my website template it is not working.In my website I do like this.I create a view like this and i load it in a controller and pass it to a another view.In that particular view I do like this.
<div class="navbar-collapse collapse ">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation"><?=$navbar?></li>
<li role="presentation">Issues</li>
<li role="presentation"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">SIGN UP</button></li>
</ul>
</div>
</div>
This is how i load view in controller.
$data['navbar'] = $this->load->view('navbar', NULL, TRUE);
I have save the view file as navbar.php.
In that view, it is not working.How can I get solve this problem? I think it is a problem with css and js files are shuffling.
You are using template based on bootstrap so there definitely have a conflict with the bootstrap dropdown class
Edit your classname in html and css for... mydropdown, mydropdown-content and it should be okey :]
Here is the fixed version
Css
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.mydropdown {
position: relative;
display: inline-block;
}
.mydropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.mydropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.mydropdown-content a:hover {background-color: #f1f1f1}
.mydropdown:hover .mydropdown-content {
display: block;
}
.mydropdown:hover .dropbtn {
background-color: #3e8e41;
}
HTML :
<div class="mydropdown">
<button class="dropbtn">Dropdown</button>
<div class="mydropdown-content">
Link 1
Link 2
Link 3
</div>
</div>