CSS Dock Menu para vbulletin 4.0.1

**posonty** · 01-17-2010 03:30 AM

Pulsa en la imagen para verla en tamaño completo

Nombre: CSS MENU DOC.jpg
Vistas: 48
Tamaño: 11.5 KB
ID: 45

Hola compañeros de posforoscripts, hoy les traigo un mod que he puesto en el foro. Trata de un menú (CSS MENÚ DOC) el cual es muy fácil de instalar y a la vez es muy útil. Los paso para instalarlos son muy sencillos, como a continuación les voy a guiar.

Lo primero que hay que hacer es descargar los archivos necesarios, para luego subirlos al root de la web, foro, o blog que queramos instalarlo.
Bueno vamos al grano lo primero descargara los archivos de cualquiera de estas direcciones.

DESCARGAR ARCHIVOS MENU CSS DOCK
http://www.multiupload.com/BPBH28BFKT
http://sharebee.com/85b9b946

Una vez descargados los archivos lo descomprimimos en una carpeta de nuestro PC. Nos mostrará unos archivos como a continuación les muestro en la imagen y también hay que subir los archivos que están señalados en ella.

SCREENSHOOT

Pulsa en la imagen para verla en tamaño completo

Nombre: TUTORIALCSS MENU DOCK1.jpg
Vistas: 45
Tamaño: 12.7 KB
ID: 44

Una vez subidos los archivos que les expuse en la imagen anterior, tenemos que agregar esta secuencia de código en la parte que quieran poner el menú.

CÓDIGO

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>
</body>
</html>

COMO PONERLO IGUAL QUE EN ESTE FORO

Específicamente si lo quieren poner igual que en este foro tendremos que hacer lo siguiente. Nos vamos al admincp del foro, luego en [Estilos y Plantillas / Buscar dentro de Plantillas] en "Buscar por Estilo" ponemos la plantilla que estemos utilizando y en "Buscar por Texto" escribimos "navbar" y a continuación buscamos la siguiente linea de código:

SCREENSHOOT

Código:

<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
        </form>
        <ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}">{vb:rawphrase advanced_search}</a></li>
        </ul>
    </div>
    </vb:if>
</div>

Seguidamente ponemos el código del menú.

CÓDIGO DEL MENU CSS MENÚ DOCK

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>
</body>
</html>

Eso es todo compañeros. Si queremos agregar mas iconos al menú simplemente tenemos que agregar una linea de código como esta.

LINEA DE CÓDIGO PARA AGRGAR MÁS ICONOS AL MENÚ

Código:

<a class="dock-item2" href="AQUÍ PONEMOS LA URL A DONDE QUEREMOS REDERIGIR EL ICONO"><span>Home</span><img src="images/home.png" alt="AQUÍ PONEMOS EL NOMBRE DEL ICONO" /></a>

**st726** · 01-24-2010 07:31 AM

buen tutorial gracias gran ayuda

**jodamida** · 01-30-2010 09:17 AM

Buen tutorial espero me sirva

**tripitinga** · 02-05-2010 09:09 PM

what? :/

**JUANI_I** · 02-12-2010 07:46 PM

Gracias x el material!

**Pol** · 03-02-2010 12:59 PM

Revisando...

**DarkSoul** · 03-08-2010 12:31 AM

Exelente aporte, sigue así compañero!

**djmaxim** · 03-19-2010 06:27 PM

Probando ...
esperemos la maxima compatibilidad..

**pucaran** · 03-26-2010 03:49 PM

no se que tal eta este script a probarlo

**KLAIR** · 04-09-2010 07:21 PM

Iniciado por posonty

Archivo Adjunto 41 Archivo Adjunto 45

Hola compañeros de posforoscripts, hoy les traigo un mod que he puesto en el foro. Trata de un menú (CSS MENÚ DOC) el cual es muy fácil de instalar y a la vez es muy útil. Los paso para instalarlos son muy sencillos, como a continuación les voy a guiar.

Lo primero que hay que hacer es descargar los archivos necesarios, para luego subirlos al root de la web, foro, o blog que queramos instalarlo.
Bueno vamos al grano lo primero descargara los archivos de cualquiera de estas direcciones.

DESCARGAR ARCHIVOS MENU CSS DOCK
Multiupload.com - upload your files to multiple file hosting sites!
Download - css-dock-menu.zip - Sharebee.com, the one and only online file hosting distribution service.

Una vez descargados los archivos lo descomprimimos en una carpeta de nuestro PC. Nos mostrará unos archivos como a continuación les muestro en la imagen y también hay que subir los archivos que están señalados en ella.

SCREENSHOOT

Archivo Adjunto 44

Una vez subidos los archivos que les expuse en la imagen anterior, tenemos que agregar esta secuencia de código en la parte que quieran poner el menú.

CÓDIGO

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>
</body>
</html>

COMO PONERLO IGUAL QUE EN ESTE FORO

Específicamente si lo quieren poner igual que en este foro tendremos que hacer lo siguiente. Nos vamos al admincp del foro, luego en [Estilos y Plantillas / Buscar dentro de Plantillas] en "Buscar por Estilo" ponemos la plantilla que estemos utilizando y en "Buscar por Texto" escribimos "navbar" y a continuación buscamos la siguiente linea de código:

SCREENSHOOT

Código:

<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
        </form>
        <ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}">{vb:rawphrase advanced_search}</a></li>
        </ul>
    </div>
    </vb:if>
</div>

Seguidamente ponemos el código del menú.

CÓDIGO DEL MENU CSS MENÚ DOCK

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>
</body>
</html>

Eso es todo compañeros. Si queremos agregar mas iconos al menú simplemente tenemos que agregar una linea de código como esta.

LINEA DE CÓDIGO PARA AGRGAR MÁS ICONOS AL MENÚ

Código:

<a class="dock-item2" href="AQUÍ PONEMOS LA URL A DONDE QUEREMOS REDERIGIR EL ICONO"><span>Home</span><img src="images/home.png" alt="AQUÍ PONEMOS EL NOMBRE DEL ICONO" /></a>

buenooooooooooooooooooooooooooooo

Tema: CSS Dock Menu para vbulletin 4.0.1

LinkBack

Herramientas

Visualizar

CSS Dock Menu para vbulletin 4.0.1

bueno

Información de Tema

Usuarios Viendo este Tema

Temas Similares

188 mod/plugins/hack para vbulletin sacados de vbulletin.org

[Flashden] Horizontal Scrolling Dock Icon Menu with Blur&Reflection V2.2

23 themes para vbulletin 3.8.1

23 themes para vbulletin 3.8.1

vBSEO.v3.3.0.PR1.para.vBulletin.3.x..Nulled

Etiquetas para este Tema

Marcadores

Marcadores

Permisos de Publicación