GetSimple Support Forum
GS 3.4 Having Span inside native menu "a" elmt - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Feature Requests (http://get-simple.info/forums/forumdisplay.php?fid=7)
+--- Thread: GS 3.4 Having Span inside native menu "a" elmt (/showthread.php?tid=10637)



GS 3.4 Having Span inside native menu "a" elmt - zekoolweb - 2018-12-01

Hi, very good work Shawn, testing the V 3.4, i notice there is no SPAN inside native menu :

<nav id="main-nav">
 <ul>
   <li class="index current active">
     <a href="http://localhost/gs34/" title="Welcome to GetSimple!">Home</a>
   </li>

This is very useful when you have to full center x and y absis the word of the link.
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Can you add the SPAN Shawn ?


RE: GS 3.4 Having Span inside native menu "a" elmt - shawn_a - 2018-12-01

Span where and why, not sure what you need a span for.


RE: GS 3.4 Having Span inside native menu "a" elmt - zekoolweb - 2018-12-01

hi, the SPAN needs to be there :

<li>
<a>
<SPAN> text shown </SPAN>
</a>
</li>

Why : do you see the red block in the picture, https://screenshotscdn.firefoxusercontent.com/images/f06b9a6e-7338-4c82-ab94-7a89d0ca8cc7.png
this is the A. (click zone) The LI is green border.

problem is, the A is not full width and full height, so hit zone is smaller than the user can expect.

With a SPAN, we can get A full and then center horizontally and vertically the SPAN (the text only, not the hitbox).

You can add this is 3.4 Shawn?


RE: GS 3.4 Having Span inside native menu "a" elmt - shawn_a - 2018-12-02

Can you not just do that in css?


RE: GS 3.4 Having Span inside native menu "a" elmt - Carlos - 2018-12-02

If you can't do it with CSS as Shawn suggests, another way could be this:

Create a functions.php file in your theme folder and paste this in the file:
Code:
<?php defined('IN_GS') or die();

add_filter('menuitems','add_span_to_nav_links');
function add_span_to_nav_links($nav='') {
  return str_replace('##TMP##','"><a',str_replace(array('">','</a>'),array('"><span>','</span></a>'),str_replace('"><a','##TMP##',$nav)));
}
// end

(If you theme already had a functions.php file, paste in it everything but the first line.)


RE: GS 3.4 Having Span inside native menu "a" elmt - zekoolweb - 2018-12-02

(2018-12-02, 21:23:04)Carlos Wrote: If you can't do it with CSS as Shawn suggests, another way could be this:

Create a functions.php file in your theme folder and paste this in the file:
Code:
<?php defined('IN_GS') or die();

add_filter('menuitems','add_span_to_nav_links');
function add_span_to_nav_links($nav='') {
 return str_replace('##TMP##','"><a',str_replace(array('">','</a>'),array('"><span>','</span></a>'),str_replace('"><a','##TMP##',$nav)));
}
// end

(If you theme already had a functions.php file, paste in it everything but the first line.)

THX, i will try this tomorrow. have a nice day you both guys.


RE: GS 3.4 Having Span inside native menu "a" elmt - shawn_a - 2018-12-03

I just dont really see the reasoning here, you can change the display mode of an li and a in css if you need a to not be inline use block


RE: GS 3.4 Having Span inside native menu "a" elmt - zekoolweb - 2018-12-03

Hi, thanks Carlos, this save my day, Shawn i can explain to you the reasoning there :
the span allows me to perfectly center the word, nonetheless, i give user bigger hitbox.
see the following screenshot
https://screenshotscdn.firefoxusercontent.com/images/f520ac7c-9403-4cdc-a7c0-3c8eee43f751.png
cyan = link (hitbox)
green = span (the word)

this is why i asked for this SPAN element to be native in the 3.4.
this is the only way i know to have this result easily...


RE: GS 3.4 Having Span inside native menu "a" elmt - shawn_a - 2018-12-04

Ok I think I get it now, yeah i would just use a custom menu generator.