Posts Tagged CSS

Manipulando CSS com jQuery

Postado por Danilo in CSS, jQuery em 28 de outubro de 2009

Com jQuery podemos adicionar e alterar atributos CSS, podemos manipular todo o CSS de uma página facilmente com a função css do jQuery. Vou mostrar detalhadamente abaixo como adicionar e alterar esses atributos.

HTML:

Supomos que você tenha na sua página o seguinte conteúdo HTML:

<html>
    <head>
        <title>Manipulando css</title>
    </head>
    <body>
        <h1>Manipulando CSS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis lorem ac ante pretium ultrices. Maecenas vel tellus lacus. Sed nec ultrices magna. Pellentesque nulla tortor, malesuada vitae viverra id, imperdiet vitae elit. Donec malesuada, dolor sit amet rutrum eleifend, ante arcu tempor dolor, vitae vulputate odio elit id metus. Fusce odio nulla, facilisis vel consectetur ut, rutrum ut diam. Nam vel blandit urna. In malesuada iaculis nulla, nec interdum nisi iaculis at. Curabitur lacinia consectetur porta. Nunc sit amet nibh eu orci venenatis adipiscing at quis leo. Donec in ante tortor. Vivamus varius tellus id lorem scelerisque placerat. Nunc semper, ligula vel tincidunt aliquet, diam diam malesuada diam, quis tristique ligula purus ac eros. Sed fringilla tellus ac lorem pellentesque vitae viverra risus dapibus. Fusce consequat felis orci. Pellentesque rutrum, tellus eget auctor vehicula, eros nibh condimentum turpis, vitae luctus magna erat a augue.</p>
    </body>
</html>

jQuery em Ação:

Primeiramente vamos baixar a biblioteca jQuery: Aqui e adicionar ela ao head do nosso código: :)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Vamos adicionar os atributos CSS à página com jQuery, no exemplo abaixo coloquei um background amarelo no body, joguei um vermelho no h1 e deixei a tag p justificado, com fonte 13px e a cor cinza. Vejamos:

$(document).ready( function() {
    $('body').css("background", "#FFFEEB");
    $('h1').css("color", "#EB191E");
    $('p').css({"font-size":"13px", "line-height":"14px", "color":"#6E6E6E", "text-align":"justify"});
});

Feito isso, Pronto! Poderemos visualizar a pagina como o CSS adicionado via jQuery.

Baixar código inteiro: Aqui

Até o próximo post…

, , ,

2 Comentários

Layout de 3 colunas com CSS

Postado por Danilo in CSS em 23 de junho de 2009

Hoje vou mostrar um exemplo prático e explicar como montar um layout de três colunas com css.

O layout fica semelhante a esse abaixo:

HTML

Primeiramente vamos fazer a estrutura do html.

Dentro da tag [body], vamos colocar uma div que vou definir com id=”site” que vai representar todo o conteudo do nosso layout.

Depois vamos acrescentar dentro dessa div#site uma div representando o topo div#topo, uma representando o conteudo div#conteudo (dentro dela vai as colunas) e mais uma pro rodape div#rodape.

Dentro da div#conteudo vamos acrescentar uma para o lado direito div#direita, uma para o meio div#meio, uma para o lado esquerdo div#esquerda, e depois uma div com um style clear: both; (pra fazer a div#conteudo descer até o final)

<html>
	<head>
		<title>Layout de 3 colunas</title>
		<link rel="stylesheet" type="text/css" href="estilo.css" />
	</head>
	<body>
		<div id="site">
			<div id="topo">div#topo</div>
			<div id="conteudo">
				<div id="esquerda">div#esquerda</div>
				<div id="meio">div#meio</div>
				<div id="direita">div#direita</div>
				<div style="clear: both;" />			
			</div>
			<div id="rodape">div#rodape</div>
		</div>
	</body>
</html>

CSS

*: vamos dar um “margin: 0 auto;” para a pagina toda (isso vai deixar a pagina centralizada).

body: vamos definir “background: #161616;” (um fundo para a pagina).

div#site: vamos definir 900px de largura e vamos dar uma margem no topo de 10px

div#topo: vamos definir 900px de largura, uma altura de 100px e colocar uma cor #444239.

div#conteudo: essa div vai segurar as três colunas, vamos deixar essa div com 900px de largura e colocar um background: #EE922E;

div#esquerda: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left e colocar uma cor #EE922E.

div#meio: vamos definir 600px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#esquerda formando a segunda coluna) e colocar uma cor #F8F3DF.

div#direita: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#meio formando a terceira coluna) e colocar uma cor #EE922E.

div#rodape: vamos definir 900px de largura, altura de 100px, dar um clear: both (isso vai fazer essa div descer abaixo das outras div de coluna) e colocar uma cor #59574C.

* { margin: 0 auto; }
body { background: #161616; }
div#site { width: 900px; margin-top: 10px;  }
div#topo { width: 900px; height: 100px; background: #444239; }
div#conteudo { width: 900px; background: #EE922E; }
div#esquerda { width: 150px; float: left; background: #EE922E; }	
div#meio { width: 600px; float: left; background: #F8F3DF; }
div#direita { width: 150px; float: right; background: #EE922E; }
div#rodape { width: 900px; height: 100px; background: #59574C; clear: both; }

, ,

11 Comentários

Menu Accordion (Sanfona) com jQuery e CSS

Postado por Danilo in jQuery em 12 de junho de 2009

Hoje vou mostrar como criar um menu accordion (Sanfona) utilizando jQuery e CSS, com um exemplo bem prático.

Este menu accordion é mais conhecido como menu Sanfona, é muito útil quando temos um número grande de categorias e sub-categorias em um menu lateral, ele facilita à organização do menu e ainda podemos colocar uns efeitinhos com jQuery.

Para utilizar este menu é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.


Chamando o jQuery

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>


HTML:

Aqui está o html do menu, colocar um id=”nav-menu” na base do menu.

<ul id="nav-menu">
	<li>
		<a href="javascript:void(0);">Etapa 1</a>
		<ul>
			<li><a href="#">Etapa 1.1</a></li>
			<li><a href="#">Etapa 1.2</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0);">Etapa 2</a>
		<ul>
			<li><a href="#">Categoria 2.1</a></li>
			<li><a href="#">Categoria 2.2</a></li>
		</ul>			
	</li>
	<li><a href="javascript:void(0);">Categoria 3</a></li>
	<li>
		<a href="javascript:void(0);">Categoria 4</a>
		<ul>
			<li><a href="#">Categoria 4.1</a></li>
			<li><a href="#">Categoria 4.2</a></li>
		</ul>
	</li>			
</ul>


Javascript:

Aqui neste código estamos bindando um evento clique para o próximo elemento depois da tag a que está dentro da li por sua vez dentro da ul com id #nav-menu, cada vez que clicar nela vamos dar um efeito slideToggle.

$(document).ready( function() {
	$('ul#nav-menu > li > a').click(function() {
		$(this).next().slideToggle();
	});
});


Css:

Agora aplicamos um css no menu para não ficar sem graça, mas você pode alterar conforme a necessidade.

ul#nav-menu { margin:0; padding:0; list-style:none; }
ul#nav-menu > li { margin-top:1px; background:#AFAFAF; font-weight: bold; width: 200px; list-style:none; }
ul#nav-menu > li > a { display:block; padding: 4px; color: #EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > a:hover { background: #8F8F8F; }
ul#nav-menu > li > ul { margin: 0; padding:0; list-style:none; display:none; background:#9F9F9F; }
ul#nav-menu > li > ul > li{ height: 30px; list-style:none; padding: 0;}
ul#nav-menu > li > ul > li:hover{ height: 30px; background: #8F8F8F;}
ul#nav-menu > li > ul > li a { display:block; padding: 2px 0 0 4px; color:#EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > ul > li a:hover { color:#FFF; background: #8F8F8F; }


Veja abaixo um exemplo do menu já pronto!

Compare preços de livros jQuery.

, , ,

3 Comentários