Question

我正在从模板中修改CSS / HTML代码，该模板将导航按钮放在横幅图像上方，该横幅图像位于后台。当浏览器窗口缩小时，模板还使用媒体查询来更改导航按钮的外观和位置。

我的主要问题是将导航菜单移动到横幅图像的右侧。菜单的位置设置为“relative”top：0，left：0。当我将菜单向左移动20个像素时，缩小版本的菜单也会向左移动20个像素。

我很想知道在桌面视图中将菜单放在右侧的最佳方法，而无需在平板电脑和移动视图中移动菜单。

我正在使用Foundation 5列。
菜单和横幅图片嵌套在12列div中。
菜单的z-index为1000，将其置于横幅上方。
浮动菜单会使横幅图像偏离位置。

感谢您的帮助！

CSS：

 #banner-nav0 {
 width:23%;
 background: url(white80.png) repeat;
 height: 357px !important;
 }

 #banner-nav {
 z-index:100;
 list-style: none;
 overflow: hidden;
 }

 #banner-nav li a {
 font-size: 1.1em;
 border-bottom:1px solid #FFFFFF;
 color:#4d4f53!important;
 display:block;
 font-family:Verdana,sans-serif;
 font-weight:normal!important;
 text-decoration:none;
 text-shadow:0 1px 1px #FFFFFF;
 padding:5%;
 }

 #banner-nav li a:hover,#banner-nav li a:active {
 background:url(img/common/home-slider-current.jpg) no-repeat;
 background-color: #4d4f53;
 color:#FFF!important;
 text-shadow:0 1px 1px #000;
 } 

 .banner-wrapper {margin-top: -357px !important;}

 #banner-nav li img {
  margin: 0 auto;
  position: relative;
  left: 6%;
  } 

 /* MEDIA QUERIES */ 

@media only screen and (min-width: 480px) and (max-width: 900px) {
#banner-nav0 {
width: 100%;
height: 20px !important;
position: relative; 
left: 0px; 
top: 0px;
}

#banner-nav li {
display: inline-block;
margin: 5px;
}
#banner-nav li a {
font-size: 1.6vw;
padding: 0.3em 0.5em !important;
}
#banner-nav li a:hover {
border-radius: 5px;
}
.banner-wrapper {margin-top: 25px !important;
}
#banner-nav li img {
display: none;
}
}

@media only screen and (max-width: 479px) {
.banner-wrapper {display: none;}
#banner-nav0 {
width: 100% !important;
height: auto !important;
position: relative; 
left: 0px; 
top: 0px;
}
#banner-nav {width: auto;}
#banner-nav li a {
font-size: 3vw;
padding: 5px;
}
#banner-nav li img {
display: none;
}
}

HTML

侧栏列区域

<section class="large-9 columns">

    <div class="large-12 columns">

        <div id="banner-nav0" style="position: relative; left: 0px; top: 0px; height: 0px; z-index: 1000">
                <ul id="banner-nav">
                <li><a href="#" title="How to Apply">How to Apply</a></li>
                <li><a href="#" title="Course Modules">Course Modules</a></li>
                <li><a href="#" title="Resources">Resources</a></li>
                <li><a href="#" title="For Faculty">For Faculty</a></li>
                </ul>
            </div>

            <div class="banner-wrapper">
                    <img src="Banner2.gif" alt="IPC Banner">
            </div>
    <!--   <div class="row">
    <div class="large-12 columns">            
            </div>
    </div> -->
    </div>

Answer 1

我没有足够的声誉来评论，所以我想发布一个答案我猜。

您希望根据查看设备的方式对表格进行不同的定位？如果设备是移动的，您是否想过在菜单中应用不同的类？

例如，如果屏幕宽度低于699px -

，这将为一个元素分配一个类

 <script>
        window.onload = "functionzero()"
        {
            if (screen.width <= 699) {
            var elem = document.getElementById("menu");
            elem.className = "mobile"; }
        }
    </script>

然后你就可以上课了＃34; .mobile＆＃34;并根据自己的喜好进行编辑。

如何在CSS中重新定位此菜单？

1 个答案: