28172 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour la communauté,

Je suis entrain de développer un site en wordpress et je sèche sur un lien du menu que je ne sais pas cliquer dessus Smiley ohwell

Je pense que c'est dans le css mais pas certain et quand je test sous chrome, je ne vois rien qui peut supprimer cette action...

J'ai éssayé de modifier la fonction : pointer-events: none;
Mais ça ne change pas grand chose ...

Le site est en maintenance car pas du tout près à être en ligne.

Une idée de recherche ?

Je sais que pas facile si pas d'accès mais je ne peux pas le mettre en ligne Smiley decu

Merci
Spirou

<nav class="main-navbar main-navbar-transparent uk-navbar uk-navbar-attached">
       
	<div class="uk-container uk-container-center">
		<div class="uk-navbar-brand uk-hidden-small"><a href="https://centreveterinairemosan.be/" class="custom-logo-link" rel="home" aria-current="page"><img width="100" height="100" src="https://centreveterinairemosan.be/wp-content/uploads/2021/11/logo_100-100.fw_.png" class="custom-logo" alt="Centre vétérinaire Mosan"></a></div>
        
        <ul id="menu-main-menu" class="uk-navbar-nav uk-navbar-flip uk-hidden-small"><li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-204 uk-active"><a title="Accueil" href="https://centreveterinairemosan.be/">Accueil</a></li>
<li id="menu-item-1157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1157 uk-parent" data-uk-dropdown="{mode:'click'}"><a title="L'équipe" href="#">L’équipe <span class="uk-icon-caret-down"></span></a>
<div class="uk-dropdown uk-dropdown-navbar">
<ul role="menu" class="uk-nav uk-nav-navbar">
	<li id="menu-item-1168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1168"><a title="Présentation" href="https://centreveterinairemosan.be/presentation/">Présentation</a></li>
	<li id="menu-item-788" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-788"><a title="Docteur Decaux" href="https://centreveterinairemosan.be/presentation/docteur_decaux/">Docteur Decaux</a></li>
	<li id="menu-item-817" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-817"><a title="Docteur Munten" href="https://centreveterinairemosan.be/presentation/docteur-munten/">Docteur Munten</a></li>
	<li id="menu-item-830" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-830"><a title="Docteur Lamouline" href="https://centreveterinairemosan.be/presentation/docteur-lamouline/">Docteur Lamouline</a></li>
	<li id="menu-item-902" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-902"><a title="Tiffany, assistante vétérinaire" href="https://centreveterinairemosan.be/presentation/assistante-malotaux/">Tiffany, assistante vétérinaire</a></li>

</ul></div></li>
<li id="menu-item-1398" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1398 uk-parent uk-open" data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="true"><a title="Services" href="#">Services <span class="uk-icon-caret-down"></span></a>
<div class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="false" style="top: 40px; left: 0px;" tabindex="">
<ul role="menu" class="uk-nav uk-nav-navbar">
	<li id="menu-item-1215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1215"><a title="Radiologie" href="https://centreveterinairemosan.be/services/radiologie/">Radiologie</a></li>
	<li id="menu-item-1218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1218"><a title="Echographie" href="https://centreveterinairemosan.be/services/echographie/">Echographie</a></li>
	<li id="menu-item-1229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1229"><a title="Anesthésie gazeuse" href="https://centreveterinairemosan.be/services/anesthesie/">Anesthésie gazeuse</a></li>
	<li id="menu-item-1233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1233"><a title="Analyseur sanguin/urinaire" href="https://centreveterinairemosan.be/services/analyseur-sanguin-urinaire/">Analyseur sanguin/urinaire</a></li>
	<li id="menu-item-1230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1230"><a title="Unité dentaire" href="https://centreveterinairemosan.be/services/unite-dentaire/">Unité dentaire</a></li>
	<li id="menu-item-1231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1231"><a title="Laser thérapeutique" href="https://centreveterinairemosan.be/services/laser-therapeutique/">Laser thérapeutique</a></li>
	<li id="menu-item-1232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1232"><a title="Doppler" href="https://centreveterinairemosan.be/services/doppler/">Doppler</a></li>
	<li id="menu-item-1012" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1012"><a title="Alimentation" href="https://centreveterinairemosan.be/services/alimentation/">Alimentation</a></li>

</ul></div></li>
<li id="menu-item-1127" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1127 uk-parent" data-uk-dropdown="{mode:'click'}"><a title="Infrastructure" href="#">Infrastructure <span class="uk-icon-caret-down"></span></a>
<div class="uk-dropdown uk-dropdown-navbar">
<ul role="menu" class="uk-nav uk-nav-navbar">
	<li id="menu-item-1384" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1384"><a title="Salle de chirurgie" href="https://centreveterinairemosan.be/infrastructures/salle-doperation/">Salle de chirurgie</a></li>

</ul></div></li>
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a title="Dernières nouvelles" href="https://centreveterinairemosan.be/blog/">Dernières nouvelles</a></li>
<li id="menu-item-197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197"><a title="Contact" href="https://centreveterinairemosan.be/contact-1/">Contact</a></li>
</ul>		
		<div class="uk-navbar-flip uk-visible-small">
            <a href="#offcanvas-menu" class="uk-navbar-toggle" data-uk-offcanvas=""></a>
        </div>
        <div class="uk-navbar-brand uk-navbar-center uk-visible-small "><a href="https://centreveterinairemosan.be/" class="custom-logo-link" rel="home" aria-current="page"><img width="100" height="100" src="https://centreveterinairemosan.be/wp-content/uploads/2021/11/logo_100-100.fw_.png" class="custom-logo" alt="Centre vétérinaire Mosan"></a></div>
	</div>
		
		
	<div id="offcanvas-menu" class="uk-offcanvas">
		<div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
			<ul id="menu-main-menu-1" class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav=""><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-204 uk-active"><a title="Accueil" href="https://centreveterinairemosan.be/">Accueil</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1157 uk-parent" aria-expanded="false"><a title="L'équipe" href="#">L’équipe</a>
<div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul role="menu" class="uk-nav-sub">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1168"><a title="Présentation" href="https://centreveterinairemosan.be/presentation/">Présentation</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-788"><a title="Docteur Decaux" href="https://centreveterinairemosan.be/presentation/docteur_decaux/">Docteur Decaux</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-817"><a title="Docteur Munten" href="https://centreveterinairemosan.be/presentation/docteur-munten/">Docteur Munten</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-830"><a title="Docteur Lamouline" href="https://centreveterinairemosan.be/presentation/docteur-lamouline/">Docteur Lamouline</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-902"><a title="Tiffany, assistante vétérinaire" href="https://centreveterinairemosan.be/presentation/assistante-malotaux/">Tiffany, assistante vétérinaire</a></li>
</ul></div>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1398 uk-parent" aria-expanded="false"><a title="Services" href="#">Services</a>
<div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul role="menu" class="uk-nav-sub">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1215"><a title="Radiologie" href="https://centreveterinairemosan.be/services/radiologie/">Radiologie</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1218"><a title="Echographie" href="https://centreveterinairemosan.be/services/echographie/">Echographie</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1229"><a title="Anesthésie gazeuse" href="https://centreveterinairemosan.be/services/anesthesie/">Anesthésie gazeuse</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1233"><a title="Analyseur sanguin/urinaire" href="https://centreveterinairemosan.be/services/analyseur-sanguin-urinaire/">Analyseur sanguin/urinaire</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1230"><a title="Unité dentaire" href="https://centreveterinairemosan.be/services/unite-dentaire/">Unité dentaire</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1231"><a title="Laser thérapeutique" href="https://centreveterinairemosan.be/services/laser-therapeutique/">Laser thérapeutique</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1232"><a title="Doppler" href="https://centreveterinairemosan.be/services/doppler/">Doppler</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1012"><a title="Alimentation" href="https://centreveterinairemosan.be/services/alimentation/">Alimentation</a></li>
</ul></div>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1127 uk-parent" aria-expanded="false"><a title="Infrastructure" href="#">Infrastructure</a>
<div style="overflow:hidden;height:0;position:relative;" class="uk-hidden"><ul role="menu" class="uk-nav-sub">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1384"><a title="Salle de chirurgie" href="https://centreveterinairemosan.be/infrastructures/salle-doperation/">Salle de chirurgie</a></li>
</ul></div>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a title="Dernières nouvelles" href="https://centreveterinairemosan.be/blog/">Dernières nouvelles</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197"><a title="Contact" href="https://centreveterinairemosan.be/contact-1/">Contact</a></li>
</ul>		</div>
    </div>
</nav>


Modifié par spirou0069 (10 Dec 2021 - 08:40)
Salut,
Pas facile de savoir quel code mettre ...
J'ai mis le code du menu
Le css est beaucoup trop long et je ne sais pas le poster ici Smiley ohwell
si tu me dit la partie de code à chercher, je la posterai Smiley cligne
Je me demande également s'il n'y a pas du php ou JS derrière pour faire fonctionner ça
En fait, il n'y a pas que service...
D'autre lien aussi, mais si je comprend comment le rendre cliquable, les autres fonctionneront aussi Smiley smile
Hello spirou0069,

Quand tu parles de lien cliquable, tu veux dire qui t'envoie vers une autre page ou un site extern ? comme le dit kerlutinoec, il pointe vers rien "#" dans la balise 'a'.
gesualda a écrit :
Hello spirou0069,

Quand tu parles de lien cliquable, tu veux dire qui t'envoie vers une autre page ou un site extern ? comme le dit kerlutinoec, il pointe vers rien "#" dans la balise 'a'.


Oui c'est ça, pour le moment il pointe vers # alors que le lien est voir image
Voici un exemple basique, quoi que la mise en forme passe plutôt par les css. Par contre, je suis pas sur d'avoir bien compris le problème et ce que tu veux faire réellement.

<a href="dossier/ton_img.jpg"><img src="dossier/ton_img_reduite.jpg" alt="Photo de ton image" height="42" width="42" title="Cliquez pour agrandir" /></a>
Désolé, pas eu le temps de revenir sur le forum ces dernier temps ... Smiley sweatdrop

Je viens de remettre une capture d'écran.

(Services, infrastructures, c'est la même chose hein Smiley cligne )
Si je déplace ma souris sur infrastructure (ou service), mon menu se déplie, mais le lien vers la page infrastructure (ou service) pointe vers un # alors que j'aimerais qu'il pointe vers cette page créée et bien entendu à jour dans le menu du WordPress.

Je pense que c'est plutôt du JS et là, je suis nul avec ça Smiley langue

Donc quand on vient mettre la souri sur le lien du menu, le menu se déplie, mais j'aimerais avoir la possibilité de pouvoir cliquer sur ce premier onglet du menu.
Smiley smile
kerlutinoec a écrit :
Bein tu remplaces ton # par ton lien.
Par contre si c'est du javascript il faut qu'on puisse le voir...


C'est déjà le cas ... Smiley cligne Je pense que effectivement il y a du JS la dessous et je ne connais pas ce langage Smiley ohwell

Le fichier est trop long pour le poster sur le sujet, il est sur un hébergeur gratuit
https://www.transfernow.net/dl/20211218xqo27j8V

Merci
Et peut-être pas que du JS ...
Je viens de trouver ce fichier en php aussi Smiley smile

<?php
/**
 * A custom WordPress nav walker class to implement UIkit menu markup.
 */

class Igaa_Primary_Menu extends Walker_Nav_Menu {

	
	public function start_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat( "\t", $depth );
		$output .= "\n$indent<div class=\"uk-dropdown uk-dropdown-navbar\">\n<ul role=\"menu\" class=\"uk-nav uk-nav-navbar\">\n";
	}

	/**
	 * Ends the list of after the elements are added.
	 */
	public function end_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat( "\t", $depth );
		$output .= "\n$indent</ul></div>";
	}

	
	public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';


		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

		if ( $args->has_children )
			$class_names .= ' uk-parent';

		$dropdown = '';
		if ( $args->has_children && $depth == 0)
			$dropdown .= ' data-uk-dropdown="{mode:\'click\'}"';

		if ( in_array( 'current-menu-item', $classes ) || in_array('current-menu-parent', $classes))
			$class_names .= ' uk-active';

		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $value . $class_names . $dropdown . '>';

		$atts = array();
		$atts['title']  = ! empty( $item->title )	? $item->title	: '';
		$atts['target'] = ! empty( $item->target )	? $item->target	: '';
		$atts['rel']    = ! empty( $item->xfn )		? $item->xfn	: '';

		// If item has_children add atts to a.
		if ( $args->has_children && $depth === 0 ) {
			$atts['href']          = '#';
			// $atts['data-toggle']   = 'dropdown';
			// $atts['class']         = 'dropdown-toggle';
			// $atts['aria-haspopup'] = 'true';
		} else {
			$atts['href'] = ! empty( $item->url ) ? $item->url : '';
		}

		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		$item_output = $args->before;

		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="uk-icon-caret-down"></span></a>' : '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}

	/**
	 * Traverse elements to create list from elements.
	 *
	 * Display one element if the element doesn't have any children otherwise,
	 * display the element and its children. Will only traverse up to the max
	 * depth and no ignore elements under that depth.
	 *
	 * This method shouldn't be called directly, use the walk() method instead.
	 */
	public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
        if ( ! $element )
            return;

        $id_field = $this->db_fields['id'];

        // Display this element.
        if ( is_object( $args[0] ) )
           $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );

        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

}

/**
 * A custom WordPress nav walker class to implement UIkit menu markup
 */
class Igaa_Offcanvas_Menu extends Walker_Nav_Menu {

	
	public function start_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat( "\t", $depth );
		$output .= "\n$indent<ul role=\"menu\" class=\"uk-nav-sub\">\n";
	}

	
	public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

		if ( $args->has_children )
			$class_names .= ' uk-parent';


		if ( in_array( 'current-menu-item', $classes )  || in_array('current-menu-parent', $classes))
			$class_names .= ' uk-active';

		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $value . $class_names . '>';

		$atts = array();
		$atts['title']  = ! empty( $item->title )	? $item->title	: '';
		$atts['target'] = ! empty( $item->target )	? $item->target	: '';
		$atts['rel']    = ! empty( $item->xfn )		? $item->xfn	: '';

		// If item has_children add atts to a.
		if ( $args->has_children && $depth === 0 ) {
			$atts['href']          = '#';
			// $atts['data-toggle']   = 'dropdown';
			// $atts['class']         = 'dropdown-toggle';
			// $atts['aria-haspopup'] = 'true';
		} else {
			$atts['href'] = ! empty( $item->url ) ? $item->url : '';
		}

		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		$item_output = $args->before;

		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}

	
	public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
        if ( ! $element )
            return;

        $id_field = $this->db_fields['id'];

        // Display this element.
        if ( is_object( $args[0] ) )
           $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );

        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

}
Je viens de trouver ca dans le fichier php ci-dessus... Si je remplace le '#' il prend en compte ce que je viens d'inscrire Smiley smile Donc, c'est la fonction qui désactive le premier lien
Maintenant, comment faire pour le désactiver complétement ?

a écrit :
// If item has_children add atts to a.
if ( $args-&gt;has_children &amp;&amp; $depth === 0 ) {
$atts['href'] = '#';
// $atts['data-toggle'] = 'dropdown';
// $atts['class'] = 'dropdown-toggle';
// $atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item-&gt;url ) ? $item-&gt;url : '';
}
J'ai remplacé la ligne qui appelle le # par ! empty( $item->url ) ? $item->url : '';
Qu'en pensez vous ?
	// If item has_children add atts to a.
		if ( $args->has_children && $depth === 0 ) {
			$atts['href']          = ! empty( $item->url ) ? $item->url : '';
			// $atts['data-toggle']   = 'dropdown';
			// $atts['class']         = 'dropdown-toggle';
			// $atts['aria-haspopup'] = 'true';
		} else {
			$atts['href'] = ! empty( $item->url ) ? $item->url : '';
		}


En tout cas, ça marche, sauf que je dois cliquer 2 fois sur le lien pour arriver sur la page Smiley smile
Mais j'avance Smiley murf
Modérateur
Bonjour,

Je ne vois pas trop pourquoi il faudrait modifier le code php ou le code js juste pour un bête lien quand on est sur Wordpress.

Ça devrait se configurer via l'interface d'administration de wordpress me semble-t-il.

Car si on modifie directement le code à l'arrache, vu sa complexité, ça m'étonnerait que ça tombe en marche comme ça.

Amicalement,
parsimonhi a écrit :
Bonjour,

Je ne vois pas trop pourquoi il faudrait modifier le code php ou le code js juste pour un bête lien quand on est sur Wordpress.

Ça devrait se configurer via l'interface d'administration de wordpress me semble-t-il.

Car si on modifie directement le code à l'arrache, vu sa complexité, ça m'étonnerait que ça tombe en marche comme ça.

Amicalement,


Si je demande, c'est que cela ne fonctionne pas Smiley cligne
Pages :