When hovering over an item how do I make it so the border wont change?
In the css I don't do anything to the borders,
#ALink:hover #SubMenu {
display: block;
position: relative;
top: 20px;
left: -18px;
}
As you can see in this JSFiddle, when you hover over A the border extends to the submenu. How do I make it not happen? (keep the border where it is)
JSFiddle
You are making #SubMenu visible, and SubMenu is wrapped in #ALink. When you make a child visible, parent re-sizes to show child element.
One solution can be as following. Of course you need to cleanup your css and make it beautiful again:
<a id="ALink" href="#">
<label>A</label>
<ul id="SubMenu">
<li class="items-2">Item 1</li>
<li class="items-2">Item 2</li>
<li class="items-2">Item 3</li>
</ul>
</a>
a > label {
display: block;
padding-left: 17px;
margin-top: 5px;
line-height: 40px;
font-size: 20px;
border: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color: #f3f3f3;
}
Check it out: http://jsfiddle.net/Zuct2/1/
Related
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
This is doing my nut in and ruining my weekend.
I found this great expandable jquery vertical navigation menu. The problem is on other pages i have unordered lists and the unordered list style for the jquery vertical menu effects all the other unordered lists and i dont want that.
The html and inline css etc is this..........
ul{list-style: none; padding: 0; margin: 0;}
#nav {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin: 15px 0;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}
<ul id="nav">
<li>Item 1
<ul>
<li>Sub-Item 1 a</li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-Item 2 a</li>
<li>Sub-Item 2 b</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-Item 3 a</li>
<li>Sub-Item 3 b</li>
<li>Sub-Item 3 c</li>
<li>Sub-Item 3 d</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Sub-Item 4 a</li>
<li>Sub-Item 4 b</li>
<li>Sub-Item 4 c</li>
</ul>
</li>
</ul>
i tried changing the css ul to #nav ul{list-style: none; padding: 0; margin: 0;} but this doesnt seem to work. please help this me out someone. cheers.
teddy
Usually, when you download a JQuery widget or thingamabob, it comes in a folder, with an example on how to use it! But i'm only guessing here that you didn't get this straight from JQuery UI?
In any case, try wrapping your menu into a DIV, with ID = "Nav"...
your other UL's inside your pages should then inherit the default ul style you declare above.
http://www.dunhamssports.com/wp-content/themes/ds2/css/images/pic.png
I am trying to add a red bar at the bottom of each submenu in a list I am building. Since the current sub menu ul is outputting the dark gradient background I cannot use another background image. Having trouble figuring out where in my code I might be able to trick it to appear at the bottom of each list in the submenu.
<div id="nav">
<ul id="coolMenu">
<li>Home</li>
<li>Products
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locater</li>
</ul>
</li>
<li>Store Locator
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locator</li>
</ul>
</li>
<li>Weekly Circular</li>
</ul>
</div>
body {background-color:#999;}
#nav {background: url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/nav.jpg) repeat-x scroll 0 0 transparent; border-bottom: 1px solid #010103; height: 46px;}
ul {list-style-type:none; padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:36px; text-transform:uppercase;}
#coolMenu {float: left;list-style: none;margin:0px; font-size: 14px;}
#coolMenu > li {float: left;margin:10px 0px 0px 10px; border-right:1px solid #fff;padding-right:7px;}
#coolMenu li a {display: block; line-height: 2em; padding: 0 .5em; text-decoration: none;}
#coolMenu ul {position: absolute;display: none;z-index: 999;list-style-type:none;}
#coolMenu ul li a {width: 100%;}
#coolMenu li:hover ul {display: block;}
/* Main menu
------------------------------------------*/
#coolMenu > li > a {color:#fff;font-weight: normal;}
#coolMenu > li:hover > a {color: #fff; border-bottom:9px solid #920001;}
#coolMenu > li > .active {color: #fff;}
/* Submenu
------------------------------------------*/
#coolMenu ul {border: 1px solid #fff; background-image:url(http://www.dunhamssports.com/wp-content/themes/ds2/css/images/dropnav-bg.png); background-repeat:repeat;text-transform:none; color:#fff; list-style-type:disc; padding-left:25px;}
#coolMenu ul li a {color: #fff; text-indent:-10px;}
#coolMenu ul li:hover a {color: #999;}
You can put in a div into the last li so you can then adjust it there like this,
<ul id="coolMenu">
<li>Home</li>
<li>Products
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locater
<div></div>
</li>
</ul>
</li>
<li>Store Locator
<ul>
<li>Home</li>
<li>Products</li>
<li>Store Locator</li>
<li>Weekly Circular Locator
<div></div></li>
</ul>
</li>
<li>Weekly Circular</li>
</ul>
And then put in this style,
#coolMenu ul li div {
border-bottom:9px solid #920001;
width: auto;
margin-left: -20px;
}
I have a grid of 12 boxes created from an unordered list as below. Border radius works fine, but IU can't get the shadow to appear. Does the box-shadow property only work on divs, but not display block elements?
<ul id="treatments">
<li id="eyelash"></li>
<li id="massage"></li>
<li id="tanning"></li>
<li id="facials"></li>
<li id="waxing"></li>
<li id="tinting"></li>
<li id="threading"></li>
<li id="nails"></li>
<li id="makeup"></li>
<li id="hair"></li>
<li id="courses"></li>
<li id="bespoke"></li>
</ul>
#content #treatments li {
height: 125px;
width: 125px;
display: block;
float: left;
margin-right: 13px;
margin-bottom: 13px;
-moz-box-shadow: 1px 1px 2px #777;
-webkit-box-shadow: 1px 1px 2px #777;
box-shadow: 1px 1px 2px #777;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/scipts/PIE.php);
}
Be sure that the margin of <li> is not set to zero.
The box-shadow is rendered in the margin. No margin -> no shadow.
You shouldn't have any issues with using box-shadow on li elements since box-shadow can be applied to all elements. Here's the section on box-shadow on the W3C site.
I had same problem... box-shadow didn't work... The reason was in rbga instead of rgba in my css code! :D