jquery nav、css定位

发布于 2024-08-13 17:27:37 字数 3647 浏览 2 评论 0 原文

我什至讨厌问这无疑是一个非常简单的问题，但我看不出有什么问题。

试图让我的子导航“向上”而不是“向下”飞出。向下工作完美。我尝试添加左侧和底部值，在 Dreamweaver 中，我的导航栏看起来是正确的，但是当我运行它时，一切都出错了，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body, td, th {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}

#navBar {
    margin: 0;
    padding: 0;
    overflow:auto;  
    position:relative;
}

#navBar li {
    float: left;
    list-style: none;
    font-weight:bold;
    background: none;
    text-align:left;
    width:90px;
    margin-right:36px;
    position:relative;      // I guess I need this
}

#navBar li.last { margin-right:0px }

#navBar li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    border:none;
    border-bottom: 2px solid #d4d4d4;
    color: #575757;
    white-space: nowrap;
}

#navBar li a:hover {
    border-bottom: 2px solid #ee2c23;
    color: #ee2c23;
}

#navBar li ul {
    margin: 0;
    padding: 0;
    position: absolute;       /* I added this */
    left: 0;                  /* and this */
    bottom: 0px;             /* and this */
    visibility: hidden;
    border-top: 1px solid white;
    background:black;
    width:120px;
    filter: alpha(opacity=80);
    opacity: 0.8;

}

#navBar li ul li {
    float: none;
    display: inline;
    text-align:left;
    border:none;
    background: #000;
}

#navBar li ul li a {
    width: auto;
    border:none;
    color: #fff;
}

#navBar li ul li a:hover {
    width: auto;
    border:none;
    text-decoration:underline;
    color: #fff;
}

#nav {
    width:753px;
    background: #fff;
    margin-top:1px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open)
   $('#navBar > li').bind('mouseout',  navBar_timer)});

document.onclick = navBar_close;
</script>
</head>
<body>
<br /><br /><br /><br /><br /> <!-- some padding to see where the menu *should* go -->
<div id="nav">
  <ul id="navBar">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a> <!-- when you hover, this should appear above this li -->
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</body>
</html>

我发布了一个链接，但目前没有开发服务器访问权限。

如果您删除我评论过的行，这对于“下拉”菜单来说很好。但我想要一个“下拉”菜单。

谢谢！

原文

hate even asking what will no doubt be a very easy question but I can't see whats wrong.

trying to get my sub nav to fly out "upwards" instead of "downwards". downwards works perfect. I tried adding left and bottom values, and in dreamweaver my nav bar looks right, but when I run it, it all goes wrong

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body, td, th {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}

#navBar {
    margin: 0;
    padding: 0;
    overflow:auto;  
    position:relative;
}

#navBar li {
    float: left;
    list-style: none;
    font-weight:bold;
    background: none;
    text-align:left;
    width:90px;
    margin-right:36px;
    position:relative;      // I guess I need this
}

#navBar li.last { margin-right:0px }

#navBar li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    border:none;
    border-bottom: 2px solid #d4d4d4;
    color: #575757;
    white-space: nowrap;
}

#navBar li a:hover {
    border-bottom: 2px solid #ee2c23;
    color: #ee2c23;
}

#navBar li ul {
    margin: 0;
    padding: 0;
    position: absolute;       /* I added this */
    left: 0;                  /* and this */
    bottom: 0px;             /* and this */
    visibility: hidden;
    border-top: 1px solid white;
    background:black;
    width:120px;
    filter: alpha(opacity=80);
    opacity: 0.8;

}

#navBar li ul li {
    float: none;
    display: inline;
    text-align:left;
    border:none;
    background: #000;
}

#navBar li ul li a {
    width: auto;
    border:none;
    color: #fff;
}

#navBar li ul li a:hover {
    width: auto;
    border:none;
    text-decoration:underline;
    color: #fff;
}

#nav {
    width:753px;
    background: #fff;
    margin-top:1px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open)
   $('#navBar > li').bind('mouseout',  navBar_timer)});

document.onclick = navBar_close;
</script>
</head>
<body>
<br /><br /><br /><br /><br /> <!-- some padding to see where the menu *should* go -->
<div id="nav">
  <ul id="navBar">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a> <!-- when you hover, this should appear above this li -->
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</body>
</html>

I'd post a link but have no development server access at the moment.

if you remove the lines i have commented, this works fine for a "drop-down" menu..but I would like a "drop-UP" menu instead.

thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声静候 2024-08-20 17:27:37

为什么不使用已经制作好的菜单呢？

CSS Play 有大量选择...

等...

编辑：我确实在CSS中发现了问题...在#navBar定义中，删除overflow: auto，它阻止了子菜单的显示

#navBar {
    margin: 0;
    padding: 0;
    position:relative;
}

并更改了底部从 0 到 2em

#navBar li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 bottom: 2em;
 visibility: hidden;
 border-top: 1px solid white;
 background:black;
 width:120px;
 filter: alpha(opacity=80);
 opacity: 0.8;
}

Why not use menus that have already been made?

CSS Play has a huge selection...

etc...

Edit: I did find the problem in the CSS... In the #navBar definition, remove the overflow: auto, it is preventing the display of the submenu

#navBar {
    margin: 0;
    padding: 0;
    position:relative;
}

and change the bottom from 0 to something like 2em

#navBar li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 bottom: 2em;
 visibility: hidden;
 border-top: 1px solid white;
 background:black;
 width:120px;
 filter: alpha(opacity=80);
 opacity: 0.8;
}

回复收藏 0 原文

双马尾 2024-08-20 17:27:37

假设一个绝对定位的对象，将其底部设置为元素的position()。

$("#menuitem").hover(function() {
   $("#submenu").css({"position" : "absolute", "bottom" : $(this).position().top, "left" : $(this).position().left });
});

Assuming an absolutely-positioned object, you set its bottom to the position() of the element.

$("#menuitem").hover(function() {
   $("#submenu").css({"position" : "absolute", "bottom" : $(this).position().top, "left" : $(this).position().left });
});

回复收藏 0 原文

~没有更多了~