zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css-dropdown menu

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2016, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2016
Beiträge: 4
Klopfa10 befindet sich auf einem aufstrebenden Ast
Standard css-dropdown menu

Hi,

I want to implement following dropdown-menu:
Touch-friendly Responsive Multilevel Navigation Menu with CSS

Problem:
I want the sub-menu <li><a> to be as wide as the text is. I want to display every <li><a> inline. Even the <span> with the black arrow should be in the same line.
If there are 2 words with a space in the <li><a>, there is a line-break.

Tried to set a fix width, but then the sub-menu don't look good anymore. It should be as wide as the text is.

Please have a look at my dropdown-menu:
https://jsfiddle.net/6u9hvgu5/2/

I hope there are some css-cracks to help me.

Thx very much!
Greetz
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.06.2016, 10:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

You can use white-space: nowrap; for the submenu items.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.08.2016, 09:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2016
Beiträge: 4
Klopfa10 befindet sich auf einem aufstrebenden Ast
Standard

Thank you very much for the help!

I've another problem with this dropdown-menu.
I will implement this dropdown in our wiki "DokuWiki".

If I have more than 2-3 submenus, the Dropdown runs out of the DokuWiki site (Screenshot), so I can't access the submenu 4 for example.
Maybe someone got a clue?

I thought of changing the z-index of dokuWiki, but I've no idea how to do that.
Maybe there's a chance to fix that without changing code of the wiki itself.

Thank you!
Angehängte Grafiken
Dateityp: png formularwesen.png (30,5 KB, 5x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.08.2016, 10:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

how z-index works

But I don't think the z-index is a problem, it looks like you have an overflow set on your DokuWiki site. But without a link or code where we can reproduce the problem we can't help you any further.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.08.2016, 11:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2016
Beiträge: 4
Klopfa10 befindet sich auf einem aufstrebenden Ast
Standard

A link to jsfiddle is in my 1.post.
I'm not the administrator of our wiki, so changing code is not my prefered solution and it will have affect on every wiki page...

I tried with another dropdown:
SmartMenus jQuery Website Menu - jQuery Plugin

https://github.com/vadikom/smartmenus

But same issue....
Now I see, the dropdown checks how much space is on the right side. If there is not enough space to display the sub-level (reduce browser size), it will dropToLeft. This feature is what I need for my dokuwiki...

The function detects the whole browser width (1920).

My question:
Can you help me changing the code of the function. I don't want the width of the browser window, it should take the width of the <div> in dokuwiki.

But I don't know where to change. Which function checks the width?
I think this way, I can solve the issue.

It would be cool If someone can look at this dropdown menu and detects the jquery function

Thank you very much!
Mit Zitat antworten
  #6 (permalink)  
Alt 18.08.2016, 13:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2016
Beiträge: 4
Klopfa10 befindet sich auf einem aufstrebenden Ast
Standard

Thank you very much!
I have the opportunity to change the style of a specific <div> without changing the stylesheet of the whole DokuWiki!

You were right, there was overflow:hidden;
Changed it to overflow:visible, now the sublevels are displayed.

Also the dropToLeft-thing on my last post works just perfect, now.

Thank you very much!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DropDown Menü per CSS ad89 CSS 7 16.08.2013 16:40
CSS Dropdown, woher kommt die graue Leiste? pkipper CSS 5 28.03.2009 10:53
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
CSS navigations problem domi1984 CSS 10 07.12.2007 14:59
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:07 Uhr.