Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu] Menu Manager : expand au hover
#12

Je peux t'aider à intégrer le code de ce menu.
Code :
<div id="positioner">

<div id="holder">

<dl class="menu">

    <dt>

        <a href="#url">Home</a>

    </dt>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Products</a>

    </dt>

    <dd>

        <a href="#url">Digital Cameras</a>

        <a href="#url">Monopods &amp; Tripods</a>

        <a href="#url">Flashguns &amp; Reflectors</a>

        <a class="last1" href="#url">Telephoto Lenses</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Services</a>

    </dt>

    <dd>

        <a href="#url">Enlarging</a>

        <a href="#url">Framing &amp; Restoring</a>

        <a href="#url">Printing</a>

        <a href="#url">Copying</a>

        <a href="#url">Sepia Toning</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Outlets</a>

    </dt>

    <dd>

        <a href="#url">London</a>

        <a href="#url">Gloucestershire</a>

        <a href="#url">East Midlands</a>

        <a class="last1" href="#url">Glasgow</a>

    </dd>

</dl>

<dl class="menu">

    <dt>

        <a href="#url">Terms</a>

    </dt>

    <dd>

        <a href="#url">Payment Methods</a>

        <a href="#url">Conditions of Sale</a>

        <a class="last2" href="#url">Privacy Policy</a>

    </dd>

</dl>

</div>

</div>
Et la css :
Code :
/* ================================================================

This copyright notice must be untouched at all times.



The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/dl-slide.html

Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */



a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}



#positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;}

#holder {position:absolute; width:150px; background:url(dl-slide/tab_0.gif) repeat-x left top; overflow:hidden; border:5px solid #000;}

dl.menu {width:300px; float:left; margin:-32700px -150px 0 0; background:url(dl-slide/tab_0.gif) no-repeat left bottom;}

dl.menu a {display:block; height:30px; color:#fff; font:normal 11px/28px verdana, sans-serif; text-decoration:none; text-align:center;}



dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;}

dl.menu dt a {background:transparent; width:150px;}

dl.menu dt a:hover,

dl.menu dt a:focus,

dl.menu dt a:active

{margin-right:1px; background:url(dl-slide/tab_1.gif) no-repeat left top;}



dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10; background:url(dl-slide/tab_1.gif) no-repeat left top;}

dl.menu dd a {background:#666;width:150px;}

dl.menu dd a.last1 {border-bottom:30px solid #666;}

dl.menu dd a.last2 {border-bottom:60px solid #666;}



dl.menu dd a:hover,

dl.menu dd a:focus,

dl.menu dd a:active

{margin-right:1px; background:#ccc; color:#000;}
Pour ce qui est de modifier l'apparence, c'est ton job avec les css.

Si tu veux du sur-mesure, tu dois me donner le code html statique de ton menu.
Là, je pourrai t'aider à l'intégrer dans le menumanager pour le rendre dynamique.
Sujet fermé


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)