SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs On SPIP-Zone, 246 visitors now

Home > Site navigation > Menus réactifs > Menu animé > Animated dropdown menu

Animated dropdown menu

12 September 2015 – by Louis Possoz

All the versions of this article: [English] [français]

Very simple display of a multilevel animated dropdown menu!

As this plugin is still brand new, would you be kind enough to let me know of any anomaly or imperfection!

The plugin is suitable for small screens (mobile)!
The color themes and dimensions are modifiable, as explained in the last section below.

Introduction

Flexibility and simplicity are the main keywords for this menu displayer. See an example on our Repair Café website.
It uses (all?) the potential of the various browsers: colour gradients, shadow for boxes and texts, as well as rounded corners, not to mention the dynamic menu boxes!

For smaller screens, the plugin reacts differently and displays a vertical drop down menu. The menu can also be discrete, disappearing at printing!

This animated dropdown menu is essentially based on a simple (!) style sheet (menu_anime.css). It does all the work!
This plugin is an ideal complement to the menus plugin but it is convenient for all menus containing a selector class="menu_anime".

The plugin is also designed to simplify the adjustment of colours and dimensions to each particular site. A method for doing it is described in detail at the end of this article.

The original idea of ​​this menu is linked to the work of Catalin Rosu (his demo). This plugin has originally been derived from his elegant and talented handling of style sheets.

Installation

Choose a manual or automatic method provided by SPIP. The plugin has no dependencies.

Use

The simplest and most general use of this plugin is through the plugin menus. After enabling this plugin (if not already), simply create a menu (or edit an existing menu) ensuring to assign the CSS class menu_anime as can be seen on the following screen-shot.

Here, the identifier “barrenav” causes the menu to display as the main navigation bar. No other intervention is necessary!

More generally, the plugin will display an entire list of links (of one or several levels) of which the first level contains the selector .menu_anime (ie <ul class="menu_anime">) and whose immediate parent belongs to the class .menu container (eg <div class="menu-container">).

Of course and as usual, the menu_anime.css stylesheet can be modified (by placing the modified copy in the squelettes/css/ directory) or overwritten (eg in the perso.css sheet). You certainly will be impatient to change the menu colours. However, direct intervention on the style sheet itself is particularly complex and daunting. That is why an alternative method has been developed (see below).

Changing colours and sizes

The plugin contains a file menu_anime.less allowing easy (?) adaptation to the specific characteristics of each website.
Although the process may seem a little daunting, it is infinitely easier than direct edition of the menu_anime.css style sheet.

Step by step procedure:

-  # Open the file menu_anime.less for editing. This file is contained in the package.
-  # In this file, change the colour ​​and/or size values as desired. They are at the beginning of the file.
-  # Compile the resulting file using a compiler Less compiler, eg online compiler.
-  # Create a menu_anime.css empty file and copy-paste the result of the compilation in it.
-  # Place the new file in the squelettes/css/ directory or replace the one located in the directory plugins/auto/menu_anime/css/.

Example: changing the base colour of the menu

-  # Select a new colour using an online color utility.
-  # Open the file menu_anime.less in a text editor.
-  # Replace the colour value (#b0422c) in the line @theme-basic: #b0422c; / * ... * / with the one that was chosen.
-  # Compile the content of this new file through an online compiler.
-  # Create a new empty file menu_anime.css and place the entire result of the compilation (copy and paste).
-  # Set the resulting file menu_anime.css in the squelettes/css/ your favourite SPIP.

Simple, isn’t it?

Another solution would perhaps be to use the LESS CSS plugin. But I’m not sure it would give any advantage. Changing colours of a website menu is a very infrequent operation once it has been installed. To be discussed...

View online : http://plugins.spip.net/menu_anime

updated on 13 September 2015

Back to top

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Add a document

Back to top

Here they're talking

  • (fr) Plugin Multidomaines 2.x

    10 juillet 2012 – 74 commentaires

    Le plug-in Multidomaines permet d’associer un nom de domaine ou un sous-domaine a un secteur Spip. Les balises rajoutées permettent de pointer un lien absolu aussi facilement qu’avec les balises originales. ATTENTION ! Le plugin n’est pas (...)

  • (fr) Le plugin FreeRadio 1.0

    25 mai 2011 – 31 commentaires

    Le plugin SPIP FreeRadio est un lecteur de flux audio gratuit à intégrer dans le corps des articles. Il permet de se mettre « à l’écoute » de WebRadios ou de sons à partir de leurs URL. FreeRadio est écrit en actionscript. Facile à intégrer, il est (...)

  • (fr) Menu privé alphabétique

    19 décembre 2016 – commentaires

    A force d’ajouter des plugins, le menu principal de l’espace privé se remplit d’items qui sont rangés un peu n’importe comment. Pas toujours facile de s’y retrouver. Ce plugin fait deux choses : trier les items des menus par ordre alphabétique, (...)

  • (fr) Agenda 2.0

    3 novembre 2008 – 1081 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. Pour une documentation concernant l’utilisation d’Agenda 3 pour SPIP 3, veuillez pour l’instant vous référer à SPIP 3, Agenda (...)

  • (fr) Tickets, suivi de bugs

    28 novembre 2008 – 44 commentaires

    Tickets est un outil de suivi de bugs directement intégré à l’espace privé de SPIP. Il est conçu pour faciliter la phase de développement du site (notamment les squelettes du site public). Tickets est un système simple de suivi de bugs directement (...)