[.net][ASP.net][AJAX] Réalisation d’un menu déroulant à l’aide de l’AjaxToolkit
Emilien Martinez | 6 août 2008 | 9:04Il est possible en détournant légèrement l’utilisation du DropDownExtender de créer un menu déroulant sans avoir à écrire la moindre ligne de JavaScript.
Au final cette solution s’avère extrêmement rapide à mètre en place et le tout sans aucune difficulté particulière.
Pour cela nous devons commencer par ajouter le traditionnel ScriptManager à notre page.
<asp:scriptmanager ID=”MyScriptManager” runat=”server”></asp:scriptmanager>
Nous ajoutons ensuite un label ainsi qu’un panel.
<asp:Label ID=”MyLabel” Text=”Header du menu” runat=”server”></asp:Label>
<asp:Panel ID=”MyPanel” runat=”server”>
<!– On Pourra rajouter ici le contenu du menu –>
</asp:Panel>
Il ne nous reste plus qu’à ajouter le DropDownExtender et à le customiser. C’est donc ici que nous allons supprimer l’effet « DropDown » afin de réaliser un menu propre.
Originellement, lors d’un passage de la souris sur le label nous aurions eu le résultat suivant :
Voici donc le code pour le DropDown :
<cc1:dropdownextender runat=”server” ID=”dde”
TargetControlID=” MyLabel “ DropDownControlID=” MyPanel “ HighlightBackColor=”Transparent” HighlightBorderColor=”Transparent” DropArrowBackColor=”Transparent” DropArrowWidth=”0″ DropArrowImageUrl=”../Design/img/pixel_tranparent.png”>
</cc1:dropdownextender>
L’astuce consiste donc à mettre toute les couleurs à « Transparent » de remplacer l’image de la flèche par un pixel de couleur transparente.
Aussi, le TargetControlID n’est pas nécessairement une un label dans le cas ci-dessous il s’agit d’une image.
Avec un peu de CSS on peu arriver au résultat suivant :
