Question

我正在为我的网站设置可折叠的侧面导航。 This tutorial似乎是一个不言自明的例子。

问题是，我在许多不同的模板上都拥有此导航功能，现在我发现该部分中的一个问题，即它手动设置主要内容的marginLeft属性，如下所示：

public class FeedMessageData : IMailData
{
    private FeedMessageValue feedMessageValue;

    public FeedMessageData(string username, string subscriptionID, DateTime messageTime)
    {
        MergeData = new Dictionary<string, string>();
        this.feedMessageValue = new FeedMessageValue
        {
             Username = username
           , SubscriptionID = subscriptionID
           , MessageTime = messageTime
        };

        PropertyInfo[] infos = this.feedMessageValue.GetType().GetProperties();
        foreach (PropertyInfo info in infos)
        {
            MergeData.Add(info.Name, info.GetValue(this.feedMessageValue, null).ToString());
        }
    }

    public Dictionary<string, string> MergeData { get; }
}

在使用侧边导航的所有不同模板中实施此操作很麻烦，因为我必须找到每个实例并在主要内容周围添加包装器，这样我才能在一个id下调整边距。

是否存在一个更好的选项，仅当导航栏弹出时才强制内容向右移动而不直接与主要内容进行交互？

Answer 1

由于所有元素都是<body>的一部分，因此在显示导航时动态设置其填充并绝对定位导航：

body.padded {
  padding-left: 300px;
}
#mySidebar{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 10px;
  background: white;
}

这是一个简单的Codepen。

如何在不调整主要内容的边距的情况下设置可折叠侧面导航？

1 个答案: