alguien me puede ayudar con el nav bar

geshiro · 13 Junio 2015, 00:55 AM

alguien me puede ayudar con el nav bar para que sea adptable a cual monitor
resposive disgn

Código (html4strict) [Seleccionar]


<html>
<head>
	<meta charset="UTF-8">
	<title>Software - Daycare</title>
	<link rel="stylesheet" href="css/main.css"/>
	<link rel="stylesheet" href="css/fonts/style.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body id="fade4">
	<div class="container">
	<nav class="main_menu">
		<ul>
			<li><span class="icon-home"></span>category</li>
			<li><span class="icon-home"></span>products</li>
			<li><span class="icon-flag"></span>reports<i aria-hidden="true" class="icon-chevron-down"></i></li>
			<li><span class="icon-user"></span>profile<i aria-hidden="true" class="icon-chevron-down"></i>
             <ul class="sub-menu">
             	<li>user stats</li>
             	<li>messages</li>
             	<li><span class="icon-level-down"></span>sign out</li>
             </ul>
			</li>
		</ul>
	</nav>
	<div class="sideright">
		<h2>soy employee</h2>
		<ul>
			<li><span class="icon-home"></span>category</li>
			<li><span class="icon-list"></span>presentation</li>
			<li><span class="icon-shopping-bag"></span>products</li>
			<li><span class="icon-network"></span>providers</li>
			<li><span class="icon-shopping-cart"></span>shopping</li>
			<li><span class="icon-folder"></span>customers</li>
			<li><span class="icon-price-tag"></span>sales</li>
			<li><span class="icon-text-document"></span>reports</li>
			<li><span class="icon-user"></span>users</li>
		</ul>
	</div>
    </div>
</html>

Código (css) [Seleccionar]


/*Universal*/
*{
	margin:0px;
	padding:0px;
	font-family: helvetica Neue;
	font-weight: lighter;
}

html,body{
	background: #16A085;
	}

div#applicationform{
	position: absolute;
	top:50%;
	left: 50%;
	margin-left: -15%;
	margin-top:  -13%;
	width:30%;
	min-height: 30%;
	background: #dcdcdc; 
	overflow: hidden;
	border-radius: 4%;
	
}
 .sub-menu {
    display:none;
    position:absolute;
 }
 
.main_menu li ul {
display:none;
}

.main_menu li:hover > ul {
display: inline-block;
margin-left: -4%;
width: 10%;
padding: 0;
background: #0D5488;
}
 
.main_menu
{
	
	text-align:left;
	line-height: 290%;
	padding-left: 66%;
	background-color: #0D5488;
	

}

.main_menu li
{
	display: inline-block;
	padding:  0 10px 0;
	font-family:arial;
	font-size: 100%;
	color:white;
}

.sideright
{
	background-color:  #e5e4d7;
	margin:3%;
	margin-left:1%;
	padding: 2%;
	font-size: 82%;
	float: left;
	max-width: 18%;
}

p#title{
	font-size: 1.6em;
	text-align: center;
	margin-top: 20px;
}

input[type="text"], input[type="password"], input[type="mail"]{
	width: 69%;
	height: 2.1em;
	margin-left: 15%;
	margin-top: 3%;
	padding-left: 3%;
	font-size: 1.1em;
	outline: none;
	border:0px;
	background-color: #ECF0F1;
	border-radius: 5px;
}

.login{
	margin:4%;
	margin-left: 15%;
	margin-bottom: 10%;
	width:71%;
	height: 2.1em;
	outline: none;
	border: 0em;
	background-color: #16A085;
	color: white;
	font-size: 1.2em;
	border-radius: 5px;
	-webkit-box-shadow:0em 0em 0em;
}

.login:hover
{
 	background-color: #1abc9c;
}

.separator
{

}
 ol , ul
 {
 	list-style: none;
 }

.main_menu li:hover
{
	background-color: #3498DB;

}

body,html#fade4
{
	background-color: white;
}

.container
{
  width: 100%;
  margin: 0px auto;
  max-width: 100%;
  min-height: 20px;
  overflow: hidden;	

}

i
{
	padding:1%;
}

Usuario Invitado · 13 Junio 2015, 16:26 PM

Para eso debes usar media queries. Por ejemplo:

Código (css) [Seleccionar]


@media screen and (max-width: 500px) {
    /* esconde el menú normal */
    .nav > ul {
         display: none;
    }
    /* muestra el botón para desplegar el nuevo menú */
    .nav > .menu-btn {
         display: block;
    }
    /* otras reglas */
}

La regla anterior aplica cuando la pantalla es menor o igual a 500px.

Test Foro de elhacker.net SMF 2.1

alguien me puede ayudar con el nav bar

geshiro

Usuario Invitado