Question

我正在尝试实施自适应导航。这是我到目前为止所做的一个小提琴：https://jsfiddle.net/a16qwd20/4/

出于某种原因，Javascript不起作用，菜单也没有显示在JS小提琴中，但它在我的代码中包含在标签中工作正常。

在其当前状态下，导航链接在580px以上正确显示，但菜单图标仍然可见。我希望菜单图标只有当显示低于580px时才能看到，当超过580只链接时！

在媒体查询开始之前，这是导航的CSS：

#navigation {
 max-width: 100%;
 background-color: #333;
 padding: 0 1.5% 0 1.5%;
 margin: 0px;
}

#navigation ul {
 padding: 0px;
}

#navigation ul li {
 display: inline-block;
 padding: 10px 1.5% 10px 1.5% ;
}

#navigation ul li a {
 text-decoration: none;
 color: #ffffff;
 font-size: 1.2em;
}

#navigation ul li a:hover {
 color: #000000;
 text-decoration: none;
}

任何帮助表示感谢。

Answer 1

你还没有告诉按钮隐藏所以只需将其添加到主CSS

.menu_button {
display: none;
}

当媒体查询启动时，该按钮变为可见。

JSfiddle Demo

Answer 2

这是实现这一目标的一种方法。 jsfiddle

@media only screen and (min-width : 580px) {
  .hide{
    display: none;
  }
}

    <a class="menu_button hide" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>

您可以在菜单按钮中添加一个类，告诉它在显示大于580px时隐藏。

Answer 3

当您使用onload或onDomReady时，您的代码将包含在load或ready事件中调用的另一个函数中。因此，您无法从该函数外部访问您的函数，因此您的javascript代码将无法在jsFiddle中运行。

试试这个

.menu_button
{
     display:none;
}

Demo here

Answer 4

检查https://jsfiddle.net/a16qwd20/7/

基本上，js代码需要加载后加载的元素。

//create datatable and columns
DataTable dtable = new DataTable();
dtable.Columns.Add(new DataColumn("Column 1"));
dtable.Columns.Add(new DataColumn("Column 2"));

//simple way create object for rowvalues here i have given only 2 add as per your requirement
object[] RowValues = { "", "" };

//assign values into row object
RowValues[0] = "your value 1";
RowValues[1] = "your value 2";

//create new data row
DataRow dRow;
dRow = dtable.Rows.Add(RowValues);
dtable.AcceptChanges();

//now bind datatable to gridview... 
gridview.datasource=dtable;
gridview.databind();

CSS在屏幕重新调整大小时水平和垂直切换导航

4 个答案: