i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now.
my code is
#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul { list-style: none;}
#menu li { display: inline;}
#menu a { float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover { width: 107px;
height: 28px;
}
#emailUs
{ display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
and the html code is
#menu
{
width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover {
width: 107px;
height: 28px;
}
#emailUs
{
display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
Note: my images are seperated images not a sprite image.
you can see the demo what i want to achieve (www.daniweb.com)
Send a varible from program which page you are on. And add a class active or inactive and css the class
for eg :
Home
My Account
Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this
<li id="home">Home</li>
<li id="myaccount">My Account</li>
then call
#home .selectedmenu{
background-image:url('homeselected.png');
}
To send variable
<?php
$menuSelected ='home';
?>
Home
Related
I have this application, written in RMarkdown:
I tried to center the .navbar elements, except for an icon on the right. This code works well:
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
But the icon is in the center:
I wanted only this icon to be at the "initial position". I tried to force this permanence with this code:
.fa-question-circle {
float: right !important;
}
But nothing happened.
Edit
When resize screen, the icon .fa-question-circle gets out of hamburguer menu when I click on it:
Hamburger menu code:
#media (max-width: 950px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
display: block !important;
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display: block !important;
}
}
I'm almost certain that the adjustment needs to be made here:
.navbar-left,.navbar-right {
float: none !important;
}
I tried this, but it didn't work:
.navbar-left,.navbar-right {
float: none !important;
display: block !important;
position: absolute !important;
}
Objective: The "icon" should be the last option on the hamburger menu. Like this:
From the link you posted,
you need to add this in your CSS
.navbar-right {
left: auto;
right: 10px;
transform: none;
}
On your second problem
Add this CSS to your ul
ul {
display: flex;
white-space: nowrap;
}
Navigation bar with left, right and centre aligned element.
CSS for nav responsive and style
<style>
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
}
.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 a.active {
background-color: #4CAF50;
color: white;
}
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topnav-right {
float: right;
}
</style>
HTML code for navigation
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
Center Nav Element
</div>
<!-- Left-aligned links (default) -->
Left 1
Left 2
<!-- Right-aligned links -->
<div class="topnav-right">
Right 1
Right 2
</div>
</div>
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}
I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice)
I want to include a menu in the black bar, so I added a UL menu as the next child element.
However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo.
I want to push the menu to the top, above the black area
I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail.
Anyone got a solution?
Thanks!!!
HTML
<div id="black-bar">
<img src="..."></img>
<ul>
<li>Programs & Projects</li>
<li>Recipes</li>
</ul>
</div>
CSS (This is only the lat of many combos I've tried)
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul{
line-height: 119px;
display: inline;
vertical-align: top;
}
#black-bar ul li{
display: inline;
}
JSfiddle
CSS
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline;
}
#black-bar ul li a {
vertical-align: top;
line-height: 40px;
color: white;
text-decoration: none;
}
You can take the line-height property from the black header.
Then you can display li as inline-block and apply padding as requited.
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
/*line-height: 119px;*/
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline-block;
padding:10px 15px 0 0;
}
see fiddle: http://jsfiddle.net/Jywd3/
I have a problem with navigation tabs on my site on http://chillicom.pixia.cz/.
Each tab is a formatted absolutely positioned anchor element. Once you click on a tab, it becomes active, which basicaly means that background image of clicked anchor will change to its "active version". Active version has a z-index 9999, inactive version 1 so an active version can overlap an inactive one. It works fine, even in IE. However, when I click on the last tab and than again on the first one, the first active tab will appear to be under the second inactive one. Why? This problem occurs only in IE8 and IE7. Can anyone help me, please? Thanks
<div id="menu">
about us
services
contact
</div>
#menu {
width: 500px; height: 27px;
margin-left: 300px;
margin-top: -27px;
overflow: hidden;
}
#menu a {
display: block;
background-repeat: no-repeat;
float: left;
position: absolute;
font-size: 15px;
color: #808080; text-decoration: none; text-align: center;
}
#menu .active {
width: 139px; height: 27px;
line-height: 29px;
background-image: url('/images/button-active.png');
z-index: 9999 !important;
}
#menu .inactive {
width: 117px; height: 22px;
line-height: 20px;
margin-top: 5px;
background-image: url('/images/button-inactive.png');
z-index: 1px !important;
}
#menu .about.active {
margin-left: -10px;
}
#menu .services {
margin-left: 120px;
}
#menu .services.active {
margin-left: 110px;
}
#menu .contact {
margin-left: 240px;
}
#menu .contact.active {
margin-left: 230px;
}
z-index: 1px !important;
Change this to:
z-index: 1 !important;
Simple error, hard to debug.
I have a problem with hover on this site I'm doing. The menu is ok in all pages, except the home. What is kinda awkward, 'cause I'm just using php include to change the content, and the header, menu and footer are always the same.
In Firefox and Chrome it's ok, but the problem is that when I mouseover the menu on IE9 it has a displacement, like the image:
example
http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif
I think it's something with the display: block, but I don't know how to fix it and make the menu work properly :(
Here is the HTML:
<div id="menu" class="group">
<ul>
<li id="menu-01"><span>Home</span></li>
<li id="menu-02"><span>A Empresa</span></li>
<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>
<ul class="menu-body">
<li>Teste1</li>
<li>Teste2</li>
<li>Teste3</li>
<li>Teste4</li>
<li>Teste5</li>
</ul>
</li>
<li id="menu-04"> <span>Serviços</span></li>
<li id="menu-05"><span>Projetos</span></li>
<li id="menu-06"><span>Novidades</span></li>
<li id="menu-07"><span>Contato</span></li>
<li id="menu-08"><span>E-mail</span></li>
<li id="menu-09"><span>Login</span></li>
</ul>
</div>
And the CSS:
#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
#menu ul span {
display: none;
}
#menu ul li {
list-style: none;
display: block;
float: left;
position: relative;
}
#menu li ul {
position: absolute;
display: none;
z-index: 12;
}
#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}
#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}
#menu li ul li a:hover {
background-color: #87c5f1;
height: 20px;
margin: 0;
}
#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}
#menu-01 {
left: 0px;
width: 75px;
}
#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}
#menu-02 {
left: 0px;
width: 112px;
}
#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}
#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}
#menu-04 {
left: 0px;
width: 103px;
}
#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}
#menu-05 {
left: 0px;
width: 108px;
}
#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}
#menu-06 {
left: 0px;
width: 113px;
}
#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}
#menu-07 {
left: 0px;
width: 101px;
}
#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}
.menu-head {
border-width: 0;
}
Can somebody help me?
I put your code (and modified it a bit) in a jsfiddle.
The problem, from what I see, seems to be with the 3rd element, which has a child ul.
From what I see from there, you have a problem with your CSS :
This CSS style
#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}
Affect this HTML element :
<ul class="menu-body">
Which you probably don't want to. (fixed here)
But I'm not sure it's your error, the code you supplied needs the images, and I do not have them...
Also, all your left:0px are useless.
If you want a better answer, you'll have to enhance your question (and/or the jsfiddle!). :-)