Menu desplegable al pasar ratón

Morgan007 · #1 (**permalink**) 23/02/2013, 14:22

Hola:
En primer lugar decir que soy neofito en el tema e igual no expreso bien lo que busco y no se interpretar vuestros consejos.

Estoy haciendo una web usando una plantilla gratuita. Me he metido en el Dreamweaver 5 y he personalizado la plantilla sin mas.

Este es el index de la plantilla que uso:
http://freehtml5templates.com/downloads/free/freshideas/

Cita:

<!doctype html>
<head>
<meta charset="UTF-8">
<title>Fresh Ideas - Home</title>
<link rel="icon" href="images/favicon.gif" type="image/x-icon"/>


<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>


<div id="container">


<header>


<a href="#" id="logo"><img src="images/logo.png" width="221" height="84" alt="logo"/></a>




<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>



</header>



<div id="intro">
<img src="images/banner1.png" alt="baner">
</div>


<header class="group_bannner_left">
<hgroup>
<h1>We serve fresh ideas</h1>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
</h2>
</hgroup>
<div class="button black"><a href="#">Read more about our fresh ideas</a></div>
</header>



<div class="holder_content">

<section class="group1">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.</p>

<article class="holder_gallery">
<a class="photo_hover2" href="#"><img src="images/picture2.jpg" width="150" height="99" alt="picture1"/></a>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
</p> <span class="readmore"><a href="#">Read more..</a></span>
</article>

<article class="holder_gallery">
<a class="photo_hover2" href="#"><img src="images/picture4.jpg" width="150" height="99" alt="picture1"/></a>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
</p> <span class="readmore"><a href="#">Read more..</a></span>
</article>

<article class="holder_gallery">
<a class="photo_hover2" href="#"><img src="images/picture5.jpg" width="150" height="99" alt="picture1"/></a>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
</p> <span class="readmore"><a href="#">Read more..</a></span>
</article>

</section>

<aside class="group2">
<h3>Latest news</h3>

<article class="holder_news">
<h4>Lorem ipsum
<span>10.09.2011</span></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.<span class="readmore">
<a href="#">Read more..</a></span></p>
</article>

<article class="holder_news">
<h4>Lorem ipsum
<span>20.09.2011</span></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
<span class="readmore"><a href="#">Read more..</a></span></p>
</article>

<article class="holder_news">
<h4>Lorem ipsum
<span>27.09.2011</span></h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
<span class="readmore"><a href="#">Read more..</a></span></p>
</article>
<a class="photo_hover2" href="#"><img src="images/picture3.jpg" width="257" height="295" alt="picture"/></a> </aside>

<section class="group3">
<h3>About us</h3>
<a class="photo_hover2" href="#"><img src="images/picture1.jpg" width="200" height="97" alt="picture1"/></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.<span class="readmore"> <a href="#">Read more..</a></span>
</p>

<h3>Testimonials</h3>
<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst." - Lorem ipsum </p>

<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst." - Lorem ipsum </p>

</section>

</div>


</div>



<footer>
<div class="container">
<div id="FooterTwo"> © 2011 Fresh ideas </div>
<div id="FooterTree"> Valid html5, css3, design and code by <a href="http://www.marijazaric.com">marija zaric - creative simplicity</a> </div>
</div>
</footer>


</body>
</html>

Quiero reeesturcutrar el menu y hacerlo que salga desplegable como este segun el index:

http://www.css3templates.co.uk/templates/scenic_photo/index.html

He hecho pruebas pero no soy capaz de ver el error ¿cómo podría hacer en el primer index una de las opciones desplegable?? POr ejemplo al pasr ratón por News, salga un menu desplegable con News1 y News2...

Si alguien me lo sabe explicar con lenguaje de calle ...o si puede pegarme aqui exactamenta que he de poner y donde...

Estoy desesperado... bueno desesperado es poco.. Lellvo leidos varios hilos y tutoriales pero no estoy al nivel o no se buscarlo...

Saludos y gracias por leerme

Tzar · #2 (**permalink**) 23/02/2013, 14:38

Te lo explico rapidamente ya que no tengo tiempo en este momento. Lo que intentas hacer no depende del código html solamente, también necesitas CSS. El css de la plantilla que intentas editar no es la misma que el de la segunda que pasaste. De todas formas puedes probar con este tutorial y tratar de adaptar tu web: http://www.cristalab.com/tutoriales/...css3-c102964l/

Morgan007 · #3 (**permalink**) 23/02/2013, 15:06

Gracias Tzar. Intentaré analizarlo todo de nuevo

Morgan007 · #4 (**permalink**) 23/02/2013, 15:19

Nada no consigo adaptarlo...no sé cómo hacerlo..

pitufoweb · #5 (**permalink**) 23/02/2013, 19:57

Hola,

Almenos podrías poner el código para ver por que no funciona.

Saludos

Linton · #6 (**permalink**) 24/02/2013, 00:46

Prueba con este ejemplo

Y corrige la línea del enlace en tu código HTML:

<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

Sin esa coletilla será como si la hoja de estilos no existiera.

Otra cosa, ¿la ruta css/styles.css es correcta? ¿TIenes el index y el CSS en carpetas diferentes? Saludos.

pitufoweb · #7 (**permalink**) 24/02/2013, 00:53

Cita:

Iniciado por Linton

Sin esa coletilla será como si la hoja de estilos no existiera.

Hola,

Y cual seria la "coletilla" ?

Saludos

Linton · #8 (**permalink**) 24/02/2013, 02:07

Salta a la vista, amigo.

Morgan007 · #9 (**permalink**) 24/02/2013, 02:22

Hola Linton:
Lo he modificado pero no logro hacerlo funcionar.. algo sigo haciendo mal..

Cita:

Iniciado por Linton

Otra cosa, ¿la ruta css/styles.css es correcta? ¿TIenes el index y el CSS en carpetas diferentes? Saludos.

Si, correcto. Son carpetas diferentes.

Que novato soyyyy madreeeee...desesperaciónnnn

Morgan007 · #10 (**permalink**) 24/02/2013, 02:29

Como me habéis preguntado sobre carpetas y archivos por si no sé explicarlo bien y por si es necesario las plantillas gratuitas completas son estas

La que yo quiero usar y hacer una opción del menu desplegable

[URL="http://freehtml5templates.com/downloads/free/freshideas.zip"]freehtml5templates.com/downloads/free/freshideas.zip[/URL]

La que tiene el menu desplegable
[URL="http://www.css3templates.co.uk/downloads/scenic_photo.zip"]http://www.css3templates.co.uk/downloads/scenic_photo.zip[/URL]

Aqui hay una que pone la información edl Template
Here is the HTML structure for this template.

Cita:

<!DOCTYPE html>
<html lang="en">
<head>



</head>
<body>
<div id="main">

<header>
<div id="logo"</div>
<nav>

</nav>
</header>


<div id="site_content">
<div id="sidebar_container">
<div class="sidebar"></div>
</div>
<div class="content"></div>
</div>


<footer></footer>

</div>
<p> </p>

<script type="text/javascript">
$(document).ready(function(){

$('ul.sf-menu').sooperfish();
});
</script>
</html>
</body>

B) CSS Files and Structure - top

There is one stylesheet used in this theme:

css/style.css

style.css is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.

C) Fonts - top

There are 2 fonts used in this theme. The fonts are Yanone Kaffeesatz and News Cycle. The font files are

fonts/YanoneKaffeesatz-Regular.ttf
fonts/YanoneKaffeesatz-Regular.eot (IE Specific)
fonts/NewsCycle-Regular.ttf
fonts/NewsCycle-Regular.eot (IE Specific)

D) JavaScript - top

This theme imports several Javascript files.

js/modernizr-1.5.min.js
js/jquery.min.js
js/jquery.easing-sooper.js
js/jquery.sooperfish.js

modernizr is a Javascript library that enables HTML5 elements and feature detects.
jQuery is a Javascript library containing lots of commonly used Javascript functions.
Easing sooper is a jQuery plugin for easing transitions, optimised for the Sooperfish drop-down menu.
Sooperfish is a jQuery plugin for the drop-down menu.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

modernizr (MIT and BSD licenses)
jQuery (MIT and GPL licenses)
jQuery easing sooper (BSD license)
Sooperfish (GPL license)
Project Icons - Designed by Navdeep Raj

POr si vosotros quye sabeis más lo podéis entender mejor todo..

Gracias por leerme

webosiris · #11 (**permalink**) 24/02/2013, 21:04

Cita:

Iniciado por Linton

Y corrige la línea del enlace en tu código HTML:
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
Sin esa coletilla será como si la hoja de estilos no existiera

perdona, eso es del todo inexacto (para no decir erróneo). Si al enlazar el css no se especifica ningún "media", se sobreentiende que es media="~~all~~screen"

Morgan007, para hacer lo que quieres vas a necesitar conocimientos de HTML y de CSS. Intenta no solo copiar cosas de ejercicios y plantillas sino ENTENDER que es lo que estás copiando, sino no lo vas a lograr. Los compañeros te han pasado buenos enlaces para lograr lo que quieres, si no lo entiendes quizás deberías repasar quizás temas un poco más básicos primero.

Linton · #12 (**permalink**) 25/02/2013, 00:31

Cita:

Iniciado por webosiris

perdona, eso es del todo inexacto (para no decir erróneo). Si al enlazar el css no se especifica ningún "media", se sobreentiende que es media="all"

Muchas gracias por la corrección

¿Eso es novedad de HTML5? Porque juraría que antes no funcionaba así.

Saludos.

webosiris · #13 (**permalink**) 25/02/2013, 01:22

Cita:

Iniciado por Linton

Muchas gracias por la corrección

¿Eso es novedad de HTML5? Porque juraría que antes no funcionaba así.

toda la vida fue así... bueno, en realidad el media por defecto no es "all" como dije antes, sino "screen" (que a efectos prácticos, en este tema, es lo mismo) mira la especificación de HTML 4 para más detalles.

Morgan007 · #14 (**permalink**) 25/02/2013, 03:17

Hola webosiris:

Cita:

Morgan007, para hacer lo que quieres vas a necesitar conocimientos de HTML y de CSS. Intenta no solo copiar cosas de ejercicios y plantillas sino ENTENDER que es lo que estás copiando, sino no lo vas a lograr. Los compañeros te han pasado buenos enlaces para lograr lo que quieres, si no lo entiendes quizás deberías repasar quizás temas un poco más básicos primero.

Ya lo he conseguido

En efecto he tenido que ir desgranando la infomación y entender para saber qué tenía que cambiar.

Finalmente lo he conseguido:
-Cambiando ordenes de HTML (cometía errores de sintaxis )
Aqui hacia referencia a un "ul.sf-menu"...
-Insertando los javascript en el Index antes del </body>
-Editando el css y adaptandolo.
Aqui he metido lo referente al "ul.sf-menu"...

Y luego lo más simple de todo y que se me había olvidado y por eso siempre me salia mal...COPIAR LA CARPETA "JS" con los javascript!!!!!!!!!!!

Espero sea tambien de utilidad a futuros "cabezones inexpertos" como yo jajajaja

Gracias a investigar horas y horas ya se cambiar los colores, tipografia, tamaños letra...

Muchas gracias a todos por el interés mostrado y por leerme.

Linton · #15 (**permalink**) 25/02/2013, 10:42

Cita:

Iniciado por webosiris

toda la vida fue así... bueno, en realidad el media por defecto no es "all" como dije antes, sino "screen" (que a efectos prácticos, en este tema, es lo mismo) mira la especificación de HTML 4 para más detalles.

Gracias por la aclaración, un saludo.