I am having difficulty with my menu on my website www.callumritchie.com
When I load the website the menu at the top of the page is already expanded and then when you click the menu icon it hides it.
I want the menu to be hidden when the page is loaded, requiring the visitor to click the menu icon to reveal/expand the menu.
HTML
Home
Work
Contact
About
jquery
$("#menuicon").click(function () {
$("#sitemenu").show("fast");
});
CSS
#switch {
cursor: pointer;
float: left;
position: relative;
z-index: 2;
background-color: #6ea9ca;
border-left: 15px solid #6ea9ca;
border-top: 15px solid #6ea9ca;
border-bottom: 15px solid #6ea9ca;
}
#switch img {
transition: transform .25s linear;
-moz-transition: -moz-transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
-o-transition: -o-transform .25s linear;
}
#menu nav {
font-family:'DroidSans';
margin-top: 23px;
display: inline-block;
position: relative;
height: 36px;
z-index: 1;
transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
-o-transition: all .25s linear;
}
#menu.active nav {
left: -20em;
opacity: 0;
}
#menu.active #switch img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
Try:
$(document).ready(function(){$("#sitemenu").hide()});
edit in response: just swap out #sitemenu for the id of the element you want hidden.
Related
my image (640x 360)
my sclass
.auth-home {
background-image: ('./assets/img/auth-background.jpg');
background-size: 100%;
background-position-y: 50%;
}
i try set background-image:
background-image: ('assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('../assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('./assets/img/auth-background.jpg');
but ONLY device not display
In the page scss:
page-yourPageName {
ion-content {
background-image: url("../assets/img/auth-background.jpg");
}
}
Demo here: http://jsfiddle.net/z2mw3k0a/1/
It works fine on desktop. However, when I use iphone to test Addthis button. The share window will pop up and then hide immediately.
I debugged on safari, and can't figure out the problem,
I just found, for #at4m-menu element, there has a style
.at4-show {
display: block!important;
}
When you unchecked this style on safari inspect element tool and check it again, the pop up window will show.
Any help are appreciated.
This problem is fixed by addthis.
Find the problem related with slideInUp animation.
#-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
-webkit-transform: translateY(0)
}
}
#keyframes slideInUp {
0% {
transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.red{
position: fixed;
background: #ff0000;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 14px;
font-weight: 300;
display: block;
width: 200px;
height: 200px;
opacity: 0;
}
<div class="red slideInUp"></div>
It works fine in chrome, but not in safari.
I'm trying to make my own simple circular transition hover. I've got this far:
http://jsfiddle.net/zLsZE/
aside{
width:183px;
height:183px;
position:absolute;
text-align:center;
border-radius:600px;
-moz-border-radius:600px;
border:10px #fff solid;
overflow:hidden;
cursor:pointer;
background:#fff;
box-shadow: 1px 1px 5px 2px #888888;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-color:#ccc;
}
aside img{
width:183px;
height:183px;
position:absolute;
border-radius:600px;
-moz-border-radius:600px;
top:0;
left:0;
margin:0;
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover img{
opacity:0.5;
width:165px;
height:165px;
top:10px;
left:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside h2{
position:absolute;
z-index:200;
bottom:0;
width:183px;
margin:0;
padding:5px 0 10px 0;
color:#fff;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background:#333;
}
<aside class="courses">
<a href="http://www.google.com">
<h2>Courses</h2>
<img src="http://placehold.it/183x183" alt="" />
</a>
</aside>
Works as intended in Firefox, but on Chrome (mac) the h2 element appears outside of the border-radius overflow on the container only on hover.
Any ideas for a workaround for this keeping it pure CSS?
Thanks in advance
Pat
I figured out a way around this - to put the images on the background of a div container inside the aside rather than them being block elements in the html...
Logo bere: San-Francisco-Family-Photographer.com
On the iphone, the image won't center.
.header-image #header #title-area {
background: url("http://www.san-francisco-family-photographer.com/wp-content/uploads/2013/04/Joey-Chandler-Photographer-square.png") no-repeat scroll center center transparent;
background-position: center;
height: 130px!important;
width: 180px!important;
}
.header-image #title-area, .header-image #title, .header-image #title a {
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks.
You could place it in a div and center it.
div#image {
background: #282;
width:130px;
height:130px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
I am having a rough time with responsive design on this one site. Don't know what is happening, and my code has kind of turned to crap as a result, this is a modified zurb foundation grid, however the client wanted left navigation. Once the design drops to an iphone for some reason the width of the top elements (logo, menu) has some margin, padding or is only approx 80% width. See http://eseamedia.com/lm
#media only screen and (max-width: 767px) {
.menu {
background: none;
padding: 0;
margin: 0;
height: auto;
max-width: 100%;
min-width: 100%;
position: relative;
display: table;
float: none; }
.menu nav {
height: auto;
margin :0 auto 26px auto;
width: 100% }
.menu ul li a {
margin: 0 auto;
width: 100%;
display: block;
text-align:center; }
.logo {
background-position: center center;
background-color: transparent;
margin 0;
height: 104px;
width: 321px;
padding: 0 }
.info {
position:relative }
.headline{
margin:0;
position:relative;
padding:0;}
.context, .wrap {
margin:0;
left:0;}
}
use meta tag
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />