SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    645
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Works perfect, I'm going to worry about mobile right when I get desktop version complete which is almost there.

    Just need bit of help with the navigation the li can make it square no matter what size the width is right now on a wider screen since I set the min-height: to 100px its wider due to the fact I was just testing and would like the background image to scale for the li when resizing if possible and right now the text is on top of the image would like to push it down bit more.

    Then just the Menu hide and show button on the bottom if thats possible to make it an anchor rather then a rollover.

    Thanks your a genius!

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would have kept the left nav a fixed pixel width as it is quite small already.

    However you should be able to do something like this to keep it square.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    ul {
    	margin:0;
    	padding:0;
    	list-style:none
    }
    .navbar {
    	position:fixed;
    	top:0;
    	left:-6.5%;
    	width:8%;
    	height: 100%;
    	background: #333;
    	z-index:99999;
    }
    .navbar h4 {
    	position:absolute;
    	right:-52px;
    	top:0;
    	z-index:2;
    	width:10px;
    	padding:20px;
    	font-size:24px;
    	margin:0;
    	background:#0c3338;
    	color:#fff;
    	text-transform:uppercase;
    }
    .navbar, .navbar ul {
    	-webkit-transition: all 0.3s ease;
    	-moz-transition: all 0.3s ease;
    	-o-transition: al 0.3s ease;
    	-ms-transition: all 0.3s ease;
    	transition: all 0.3s ease;
    }
    .navbar:hover {
    	width:8%;
    	left:0;
    }
    .navbar li {
    	margin: 0;
    	padding: 0;
    }
    .navbar li a {
    	display: block;
    	font-size: 12px;
    	font-weight: 700;
    	line-height:normal;
    	margin: 0;
    	min-height:0;
    	padding: 0;
    	text-align: center;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #FFF;
    	width: 100%;
    }
    .icon {
    	background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/scribble.png') top center no-repeat;
    	background-size:cover;
    	display: block;
    	font-size: 12px;
    	font-weight: 700;
    	line-height:normal;
    	margin: 0;
    	min-height: 0;
    	padding: 0;
    	text-align: center;
    	text-transform: uppercase;
    	width: 100%;
    }
    .home { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/home.png') top center #ffd204 no-repeat; }
    .menu { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/menu.png') top center #71cef5 no-repeat; }
    .catering { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/catering.png') top center #ce4553 no-repeat; }
    .location { background: url('http://modocom.ca/scribbles/wp-content/themes/scribbles/images/location.png') top center #735da8 no-repeat; }
    /* extra over-riding rules */
    .navbar { display:table; }
    .navbar li {
    	background-size:cover;
    	display:table;
    	line-height:normal;
    	width:100%;
    }
    .navbar li a {
    	line-height:normal;
    	position:relative;
    	min-width:62px;
    }
    .navbar li a:after {
    	content:" ";
    	margin-top:100%;
    	display:block;
    	height:0;
    	line-height:0;
    }
    .navbar li span {
    	position:absolute;
    	bottom:5px;
    	left:0;
    	right:0;
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <div class="navbar">
    		<ul>
    				<li class="icon"><a href="#"></a></li>
    				<li class="home"><a href="http://modocom.ca/scribbles"><span>Home</span></a></li>
    				<li class="menu"><a href="http://modocom.ca/scribbles/menu"><span>Menu</span></a></li>
    				<li class="catering"><a href="http://modocom.ca/scribbles/catering"><span>Catering</span></a></li>
    				<li class="location"><a href="http://modocom.ca/scribbles/location"><span>Location</span></a></li>
    		</ul>
    </div>
    </div>
    </body>
    </html>
    Then just the Menu hide and show button on the bottom if thats possible to make it an anchor rather then a rollover.
    You'll need JS to do the show and hide unless you only want to support modern browsers then you could place a checkbox at the bottom and use its :checked state to change the display of its siblings.

    I'm not sure what you are doing with the toggle anyway as you are already showing and hiding on hover.

  3. #28
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    645
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect, its looking better now!!!

    Only thing I noticed now is that just the word is clickable not the whole block in the navigation how can I fix that?

    We decided to keep it on hover now. Up at the top the first grey block how can I have a word menu on it going diagonally up so people know its menu. Don't want it hanging out further than the menu right now so just on that grey spot. I suppose I could include it in the picture but ideally wouldnt like to do that.

    Thanks

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Perfect, its looking better now!!!

    Only thing I noticed now is that just the word is clickable not the whole block in the navigation how can I fix that?
    Like this:
    Code:
    .navbar li a{overflow:hidden}
    Up at the top the first grey block how can I have a word menu on it going diagonally up so people know its menu. Don't want it hanging out further than the menu right now so just on that grey spot. I suppose I could include it in the picture but ideally wouldnt like to do that.
    You can rotate text like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
    	position:absolute;
    	top:10px;
    	left:10px
    }
    </style>
    </head>
    
    <body>
    <div class="test">Menu</div>
    </body>
    </html>

  5. #30
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    645
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, very useful to know how to rotate text, now just gotta figure out how to put it on the right hind side of the top li.

    I figured out the media queries easily looks good on mobile now from what I can tell.

    Almost complete now, just figure out this rotating menu text and think itll be ready YAY!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •