Mudsaf Posted October 3, 2013 Share Posted October 3, 2013 Alright, i'm wondering how to get pos2 & pos3 width depending on the text size, this is my code so far. <html><head><meta charset='utf-8'><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><title>Navigation</title><style>* {margin:0;padding:0;}#navigation {margin:50px auto 0 auto;width:1200px;}.naviHeader {display:inline-block;vertical-align:text-top;}.positioning {position:absolute;text-align:left;background-color:#CCC;border-right:groove;width:auto;}.pos1 {display:none;}.pos2, .pos3 {margin-top:-20px;display:none;width:auto;}</style></head><body><script>$(function() {var NavLevel;$(".naviHeader").mouseenter(function() {NavLevel = 1;$(this).find(".pos" + NavLevel).show();$(this).find(".subNavi" + NavLevel).mouseenter(function() {NavLevel = 2; width = $(this).width();$(this).find(".pos" + NavLevel).css({"margin-left":width, "display":"inline-block"});$(this).find(".subNavi" + NavLevel).mouseenter(function() {NavLevel = 3;width = $(this).width();$(this).find(".pos" + NavLevel).css({"margin-left":width, "display":"inline-block"});}).mouseleave(function() {$(this).find(".pos" + NavLevel).hide();});}).mouseleave(function() {$(this).find(".pos" + NavLevel).hide();});}).mouseleave(function() {NavLevel = 1;console.log(NavLevel);$(this).find(".pos" + NavLevel).hide();});});</script><div id="navigation"><div class='naviHeader'>Homepage<div class='pos1 positioning'><div class='subNavi1'>Data1 asdasdasa<div class='pos2 positioning'><div class='subNavi2'>Data1 - Item1<div class='pos3 positioning'><div class='subNavi3'>Data1 - Item1 - Item1</div><div class='subNavi3'>Data1 - Item1 - Item2</div></div></div><div class='subNavi2'>Data1 - Item2<div class='pos3 positioning'><div class='subNavi3'>Data2 - Item1 - Item1</div><div class='subNavi3'>Data2 - Item1 - Item2</div></div></div></div></div><div class='subNavi1'>Data2</div><div class='subNavi1'>Data3</div><div class='subNavi1'>Data4</div></div></div> - <div class='naviHeader'>Forums</div><div></body></html> Link to comment Share on other sites More sharing options...
davej Posted October 3, 2013 Share Posted October 3, 2013 Hmmm... some sort of menu. Do you mean that you want to find out how wide it needs to be or how wide it is? <div id="navigation"><div class='naviHeader'>Homepage<div class='pos1 positioning'><div class='subNavi1'>Data1 has more...<div class='pos2 positioning'><div class='subNavi2'>[....How wide am I?.....]<div class='pos3 positioning'><div class='subNavi3'>[........how wide am I?.......]</div><div class='subNavi3'>Data1 - Item1 - Item2</div> Link to comment Share on other sites More sharing options...
Mudsaf Posted October 4, 2013 Author Share Posted October 4, 2013 (edited) Well if you try that code and mouseenter on "naviHeader", he subnavi text will be displayed, but after you mouseenter subnavi the subnavi2 width is too low. Copy & paste and test and you'll see my problem. (Use chrome, bc i will modify it for other browsers later.) Edited October 4, 2013 by Mudsaf Link to comment Share on other sites More sharing options...
davej Posted October 4, 2013 Share Posted October 4, 2013 Well, this seems to help a little... .subNavi2, .subNavi3 {white-space: nowrap;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now