如何自定义并使网站和移动设备响应垂直菜单

Question

我尝试在我的 Blogger 网站上嵌入垂直菜单栏。但是它似乎没有响应，而且颜色与我的网站不匹配。

我需要去除阴影并使网站在移动设备上响应。

我网站的背景颜色是白色：https://codemyquestion.blogspot.com/

打开方式是这样的：

这是预期的输出：

代码如下：

<style>
    .ddsmoothmenu-v ul {
        margin: 0;
        padding: 0;
        width: 130px;
     /* Main Menu Item widths */
        list-style-type: none;
        font: bold 12px Verdana;
        border-bottom: 0px solid #ccc;
    }
    
    .ddsmoothmenu-v ul li {
        position: relative;
    }
    
    .downarrowclass {
        position: absolute;
        top: 12px;
        right: 7px;
    }
    
    .rightarrowclass {
        position: absolute;
        top: 10px;
        right: 5px;
    }
        /* Top level menu links style */
    .ddsmoothmenu-v ul li a {
        display: block;
        overflow: auto;
            /*force hasLayout in IE7 */
        height: 32px;
        color: white;
        text-decoration: none;
        padding: 5px 5px 5px 25px;
        border-bottom: 0px solid #778;
        border-right: 0px solid #778;
    }
    
    .ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
        color: white;
        background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
        height: 22px;
        background-repeat: repeat-x;
        background-position: left center;
        margin-bottom: 1px;
    }
    
    .ddsmoothmenu-v ul li a.selected {
            /*CSS class that's dynamically added to the currently active menu items' LI A element*/
        color: white;
        background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
        height: 22px;
        background-repeat: repeat-x;
        background-position: left center;
    }
    
    .ddsmoothmenu-v ul li a:hover {
        color: white;
        background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
        height: 22px;
        background-repeat: repeat-x;
        background-position: left center;
    }
        /*Sub level menu items */
    .ddsmoothmenu-v ul li ul {
        position: absolute;
        width: 170px;
            /*Sub Menu Items width */
        height: 22px;
        top: 0;
        font-weight: normal;
        visibility: hidden;
    }
        /* Holly Hack for IE \*/
    * html .ddsmoothmenu-v ul li {
        float: left;
        height: 1%;
    }
    
    * html .ddsmoothmenu-v ul li a {
        height: 1%;
    }
    /*======= Vertical Drop Down Menu By Helper Blogger ========= */
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://helperblogger.ucoz.com/code/hb-smooth-menu.js"></script>
    <script type="text/javascript">
        })
    </script>
    <script type="text/javascript">
        ddsmoothmenu.init({
    
            mainmenuid: "smoothmenu2",
            //Menu DIV id
            orientation: 'v',
            //Horizontal or vertical menu: Set to "h" or "v"
            classname: 'ddsmoothmenu-v',
            //class added to menu's outer DIV
    
            //customtheme: ["#804000", "#482400"],
            contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
        })
    </script>
    <div id="smoothmenu2" class="ddsmoothmenu-v">
         <ul>
            <li>
                <a href="http://www.helperblogger.com/">Home</a>
            </li>
            <li>
                <a href="#">Folder 0</a>
                <ul>
                    <li>
                        <a href="#">Sub Item 1.1</a>
                    </li>
                    <li>
                        <a href="#">Sub Item 1.2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Folder 1</a>
                <ul>
                    <li>
                        <a href="#">Sub Item 1.1</a>
                    </li>
                    <li>
                        <a href="#">Sub Item 1.2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item 3</a>
            </li>
            <li>
                <a href="#">Folder 2</a>
                <ul>
                    <li>
                        <a href="#">Sub Item 2.1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="http://www.helperblogger.com/">Create This</a>
            </li>
        </ul>
        <br style="clear: left" />
    </div>

Answer 1

有趣的是，我最近也让我的在线网络游戏手机响应。我可以帮忙：

问题是px。不要将 px 用于移动网站。相反，使用百分比 (%) 或 viewport-width (vw) 这些将使元素将调整为浏览器大小。
绝对定位。如果元素不在 div 内，它将覆盖页面的宽度。如果它在 div 中，它不会遵循 div 的宽度。相反，使用 position: relative 因为这是相对于视口页面的宽度或高度。
尝试在 laptop/desktop 上调整浏览器大小，注意元素匹配。下一篇：
在笔记本上使用CSS3max-width属性等，看起来不错。但是在移动设备上它可能看起来像是桌面屏幕的缩小版。例如：

在移动设备上看起来一样，但更小。

现在，您终于可以使用：<meta> HTML 标签了。它绝对适用于文本、图像等。方法如下：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

使用这些技巧，您的网站就可以在移动设备上使用了。

编辑：我看到了你的网站。在我的笔记本电脑上一切看起来都很好。到底哪里出了问题？

Answer 2

你只需要在风格上做一些改变

<style>
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 130px;
 /* Main Menu Item widths */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
    position: relative;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    left: 7px;
    transform:rotateY(180deg); /* change the right arrow to left arrow */
}

.rightarrowclass {
    position: absolute;
    top: 10px;
    left: 5px;
    transform:rotateY(180deg); /* change the right arrow to left arrow */
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color: white;
    background-image: url(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}
    /*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
    left:-170px !important; /* move the sub-menu to the left */
    box-shadow:none !important; /* remove the shadow */
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}

* html .ddsmoothmenu-v ul li a {
    height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>

Answer 3

黑白导航菜单：

HTML

<div class="sidenav">
  <a href="#about"><i class="fa fa-home"></i> About</a>
  <a href="#services"><i class="fa fa-home"></i> Services</a>
  <a href="#clients"><i class="fa fa-home"></i> Clients</a>
  <a href="#contact"><i class="fa fa-home"></i> Contact</a>
  <div href="#" class="dropdown-btn">
  <i class="fa fa-home"></i> 
    <i class="fa fa-caret-right"></i>Dropdown
    <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#contact"><i class="fa fa-home"></i> Search</a>
</div>

CSS

.sidenav {
  height: 100%;
  width: 58px;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  padding: 20px 0;
  white-space: nowrap;
  overflow-x:hidden;
  transition: all 0.2s ease-in-out;
}
.sidenav:hover {
  width: 200px;
  overflow-x:visible;
}
.sidenav .fa:not(.fa-caret-right){
    margin-right:20px;
}

.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
  position:relative;
}
.dropdown-btn:hover .dropdown-container{
    display:block;
}

.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
  position:absolute;
  width:200px;
  left:100%;
  margin-top:-30px;
}

.fa-caret-right {
  float: right;
  padding-right: 8px;
  display:none !important;
}

子菜单向右侧打开，如果您想从左侧打开它，请使用此代码：

HTML

<div class="sidenav">
  <a href="#about"><i class="fa fa-home"></i> About</a>
  <a href="#services"><i class="fa fa-home"></i> Services</a>
  <a href="#clients"><i class="fa fa-home"></i> Clients</a>
  <a href="#contact"><i class="fa fa-home"></i> Contact</a>
  <div href="#" class="dropdown-btn">
  <i class="fa fa-home"></i> 
    Dropdown
    <i class="fa fa-caret-left"></i>
    <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#contact"><i class="fa fa-home"></i> Search</a>
</div>

CSS

.sidenav {
  direction:rtl;
  height: 100%;
  width: 58px;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  padding: 20px 0;
  white-space: nowrap;
  overflow-x:hidden;
  transition: all 0.2s ease-in-out;
}
.sidenav:hover {
  width: 200px;
  overflow-x:visible;
}
.sidenav .fa:not(.fa-caret-left){
    margin-left:20px;
}

.sidenav a, .dropdown-btn {
  padding: 6px 16px 6px 8px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  cursor: pointer;
  outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
  position:relative;
}
.dropdown-btn:hover .dropdown-container{
    display:block;
}

.dropdown-container {
  display: none;
  background-color: #262626;
  padding-right: 8px;
  position:absolute;
  width:200px;
  right:100%;
  margin-top:-30px;
}

.fa-caret-right {
  float: left;
  display:none !important;
}

如何自定义并使网站和移动设备响应垂直菜单

How to customize and make website and mobile responsive the vertical menu

html

css

blogger