0

ページの左側に垂直メニュー div があり、下部に 6 つのリンクと画像があります。リンクはボックスのスタイルになっています。JS を使用してリンク ボックスの余白を変更できるようにして、高さを埋めますが、解像度が小さくても消えないようにしたいと考えています。これが私が効果を上げようとしなかったものです。

ここにCSSがあります

.sidebar {
    float: left;
    background-color:#FFFFFF;
    background-image: url('../images/sandMenu1.jpg');
    width: 150px;
    min-height: 100vh;
    color: #04B4AE;
    margin-top: 50px;
    background-size:  100%;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 1;
    padding-top: 35px;
    position: fixed;
}

#sidebarLink a:link, a:visited{
   display: inline-block;
   font-weight: bold;
   background-color: #D7F5BA;
   color: #04B4AE;  
   width: 90px;
   padding: 4px;
   border-style: outset;
   border-width: 2px;
   border-color: #D8D8D8;
   margin-top: 35px;
   margin-bottom: 35px;
   margin-right: 30px;
   float: right;
}


#sidebarLink a:hover, a:active, a:focus{
   font-weight: bold;
   background-color: #B404AE;
   color: #04B4AE;  
   width: 90px;
   padding: 4px;
   border-style: outset;
   border-width: 2px;
   border-color: #6A0888;
   margin-top: 35px;
   margin-bottom: 35px;
   margin-left: 15px;
   margin-right: 30px;
   float: right;
}   

.sidebarLinkList li {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

ここにHTMLがあります。

  <div id="sideMenu" class="sidebar">
<nav id="sidebarLink">
  <ul class="sidebarLinkList">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="Destination.html">Destination</a></li>
    <li><a href="homepage.html">Home</a></li>
    <li><a href="homepage.html">Home</a></li>
  </ul>
</nav>
<div>
  <img src="images/sand.jpg" class="sand" id="sidePic">
</div>
  </div>

 <script>
   var winHeight = $(window).height();
   var winWid = $(window).width();
   var spacing = 0;
   var menuHeight = 0;
   menuHeight = (winHeight - 280); /*header height+image height+image margin = 280px*/
   spacing = (menuHeight - (6 * 25))/12; /*links are ~25px tall*/
   document.getElementById("sidebarLink").style.marginTop=spacing+"px";
   document.getElementById("sidebarLink").style.marginBottom=spacing+"px";
  </script>

私はどんな提案にもオープンです。これを行うために Javascript を使用するつもりはありません。ありがとうございました。

4

1 に答える 1

1

CSS の高さのパーセンテージを使用して、これらすべてを行うことができます。css3 calcを使用して、画像の上のメニューの高さを計算し、li 要素に 16% の高さを与えて、分割されたメニューを均等に埋めることができます。

HTML

<div id="sideMenu" class="sidebar">
    <nav id="sidebarLink">
        <ul class="sidebarLinkList">
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="link.html">link</a></li>
            <li><a href="Destination.html">Destination</a></li>
            <li><a href="homepage.html">Home</a></li>
            <li><a href="homepage.html">Home</a></li>
        </ul>
    </nav>
    <img src="http://lorempixel.com/200/100/" alt="" />
</div>

CSS

#sideMenu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
}
#sidebarLink {
    height: 80%;
    height: -webkit-calc(100% - 100px);
    height: calc(100% - 100px);
}
#sideMenu ul {
    padding: 0;
    margin: 0;
    height: 100%;
}
#sideMenu ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 16.66666666666666666666666666666666%;
}
#sideMenu ul > li > a {
    font-weight: bold;
    background-color: #D7F5BA;
    color: #04B4AE;
    width: 90px;
    padding: 4px;
    border-style: outset;
    border-width: 2px;
    border-color: #D8D8D8;
    text-decoration: none;
    display: block;
    -webkit-transition: all 200ms;
    transition: all 200ms;
}
#sideMenu ul > li:hover > a {
    background-color: #B404AE;
    color: #04B4AE;
    border-color: #6A0888;
}

デモ

于 2013-08-25T22:59:29.440 に答える