Hidden UL/LI

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Hidden UL/LI

Michelle Konzack
Hello *,

I have a "Menu" with 6 items which schould be placed  horizontal,  which
is, what I have already gotten, but not I get headaches with two of  the
items which have a "Submenu" with an  unknown  number  of  items  (auto-
generated from PHP) which I wan to hide and show only, if  I  move  with
then mouse over the item in the first list.

Can someone explain me simple ho to do this?

I was thinking with adding the ":hover" to the syle, but this  does  not
work as expected, because if I wan to move down the list, it disapear.

The Menu looks like

 TITLE 1 | TITLE 2  | TITLE 3 | TITLE 4  | TITLE 5 | TITLE 6
           ITEM 2.1             ITEM 4.1
           ITEm 2.2             ITEM 4.2
           ...                  ...
           ITEM 2.n             ITEM 4.n

Thanks in avance

--
Michelle Konzack        Miila ITSystems @ TDnet
GNU/Linux Developer     00372-54541400

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

signature.asc (853 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Tom Livingston
Hi Michelle,

Add the hover to the "TITLE 2" <li>, not the <a> in the <li>. When hovering
the <li>, show the related submenu in that <li>.

HTH

On Mon, Mar 20, 2017 at 9:32 AM, Michelle Konzack <[hidden email]>
wrote:

> Hello *,
>
> I have a "Menu" with 6 items which schould be placed  horizontal,  which
> is, what I have already gotten, but not I get headaches with two of  the
> items which have a "Submenu" with an  unknown  number  of  items  (auto-
> generated from PHP) which I wan to hide and show only, if  I  move  with
> then mouse over the item in the first list.
>
> Can someone explain me simple ho to do this?
>
> I was thinking with adding the ":hover" to the syle, but this  does  not
> work as expected, because if I wan to move down the list, it disapear.
>
> The Menu looks like
>
>  TITLE 1 | TITLE 2  | TITLE 3 | TITLE 4  | TITLE 5 | TITLE 6
>            ITEM 2.1             ITEM 4.1
>            ITEm 2.2             ITEM 4.2
>            ...                  ...
>            ITEM 2.n             ITEM 4.n
>
> Thanks in avance
>
> --
> Michelle Konzack        Miila ITSystems @ TDnet
> GNU/Linux Developer     00372-54541400
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

GJim
Tom and Michelle,

> Hi Michelle,

> Add the hover to the "TITLE 2" <li>, not the <a> in the <li>. When hovering
> the <li>, show the related submenu in that <li>.

> HTH

'Hover' doesn't work on most mobile devices, though, so your menu would not be
'mobile-friendly'.

You can see how I solved this on www.rmaba.org (book fair menu) and
www.wyomerc.com (custom book-box menu).  Have a sub-menu that appears when the
site visitor selects from the main menu.  I leave the .php code, for generating
your sub-menu items, up to you.

The method shown, above, works on mobile-devices as well as bi desk-top
monitors.

G-Jim c):{-

--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

GJim

> as well as bi desk-top monitors

Make that 'big desk-top monitors'.

G-Jim c):{-

--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Tom Livingston
I have a sample here:

https://tomliv.com/navigation-menu/index.html

Though not perfect, you get the idea...



On Mon, Mar 20, 2017 at 12:35 PM, GJim <[hidden email]> wrote:

>
> > as well as bi desk-top monitors
>
> Make that 'big desk-top monitors'.
>
> G-Jim c):{-
>
> --
> Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
> Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
> My photography: http://www.gjim.com
>
>


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Tom Livingston
This does work with touch devices I've tested, btw...

On Mon, Mar 20, 2017 at 2:30 PM, Tom Livingston <[hidden email]> wrote:

> I have a sample here:
>
> https://tomliv.com/navigation-menu/index.html
>
> Though not perfect, you get the idea...
>
>
>
>>



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Philippe Wittenbergh
In reply to this post by Tom Livingston

> On Mar 21, 2017, at 3:30 AM, Tom Livingston <[hidden email]> wrote:
>
> I have a sample here:
>
> https://tomliv.com/navigation-menu/index.html
>
> Though not perfect, you get the idea…

As always, those things are not exactly friendly to keyboard users (and eventually, screen readers) as the sub navigation remains completely hidden to them (it works better for small devices, given the script,  think).


> On Mar 21, 2017, at 3:32 AM, Tom Livingston <[hidden email]> wrote:
>
> This does work with touch devices I've tested, btw…

Define “touch” device… an iPad would have problems, similar to the keyboard users above.

It would be acceptable if your top-level links point to some sort of landing page(s), where the subnav links are explicitly described.


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Tom Livingston
Works on iPhone/up-to-date Android. This is only a start. Work in progress.
But does demonstrate the question the OP asked. Getting the sub to show
with hover - which is with a mouse.



On Mon, Mar 20, 2017 at 8:37 PM Philippe Wittenbergh <[hidden email]> wrote:

>
> > On Mar 21, 2017, at 3:30 AM, Tom Livingston <[hidden email]> wrote:
> >
> > I have a sample here:
> >
> > https://tomliv.com/navigation-menu/index.html
> >
> > Though not perfect, you get the idea…
>
> As always, those things are not exactly friendly to keyboard users (and
> eventually, screen readers) as the sub navigation remains completely hidden
> to them (it works better for small devices, given the script,  think).
>
>
> > On Mar 21, 2017, at 3:32 AM, Tom Livingston <[hidden email]> wrote:
> >
> > This does work with touch devices I've tested, btw…
>
> Define “touch” device… an iPad would have problems, similar to the
> keyboard users above.
>
> It would be acceptable if your top-level links point to some sort of
> landing page(s), where the subnav links are explicitly described.
>
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: Hidden UL/LI

Michelle Konzack
In reply to this post by Michelle Konzack
Thankyou all,

now it works, have only to adapt some settings,
because it looks a little bit funny.


On 2017-03-20 14:32:05 Michelle Konzack hacked into the keyboard:

> Hello *,
>
> I have a "Menu" with 6 items which schould be placed  horizontal,  which
> is, what I have already gotten, but not I get headaches with two of  the
> items which have a "Submenu" with an  unknown  number  of  items  (auto-
> generated from PHP) which I wan to hide and show only, if  I  move  with
> then mouse over the item in the first list.
>
> Can someone explain me simple ho to do this?
>
> I was thinking with adding the ":hover" to the syle, but this  does  not
> work as expected, because if I wan to move down the list, it disapear.
>
> The Menu looks like
>
>  TITLE 1 | TITLE 2  | TITLE 3 | TITLE 4  | TITLE 5 | TITLE 6
>            ITEM 2.1             ITEM 4.1
>            ITEm 2.2             ITEM 4.2
>            ...                  ...
>            ITEM 2.n             ITEM 4.n
>
> Thanks in avance
>
> --
> Michelle Konzack        Miila ITSystems @ TDnet
> GNU/Linux Developer     00372-54541400


--
Michelle Konzack        Miila ITSystems @ TDnet
GNU/Linux Developer     00372-54541400

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

signature.asc (853 bytes) Download Attachment