CODEWITHSUNDEEP
htmlcssblogger
user16375592
user16375592

Reputation:

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

I have tried to embed a vertical menu bar on my Blogger website. But it seems like it's not responsive and the colour is not matching my website.

I need to remove the shadow and make the website responsive in mobile.

My website's background colour is white: https://codemyquestion.blogspot.com/

This is how it is opened:

enter image description here

This is the expected output:

enter image description here

Below is the code:

<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>

Upvotes: 0

Views: 484

Answers (3)

Mohsen TOA
Mohsen TOA

Reputation: 809

the black white nav menu:

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;
}

the sub-menu opens to the right side, if you want to open it from the left side use this code:

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;
}

Upvotes: 1

Mohsen TOA
Mohsen TOA

Reputation: 809

you just need to make some changes in your style

<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>

Upvotes: 0

user16308564
user16308564

Reputation:

Funny, I recently made my online web-game mobile responsive too. I can help:

  1. The problem is px. Don't use px for mobile websites. Instead, use percent (%) or viewport-width (vw) these will make it so the elements will resize to the browser size.

  2. Absolute positioning. It will override the width of the page if the elements are not inside a div. If it's in a div, It'll not follow the width of that div. Instead, use position: relative because this is relative to the width or height of the viewport page.

  3. Try resizing your browser on your laptop/desktop, and notice the elements match. Next:

  4. Use the CSS3 max-width property so on laptop, it'll look fine. But on mobile devices it'll probably look like a smaller version of the desktop sized screen. For example: random website screenshot

will look the same on a mobile device but smaller.

Now, finally, you can use: <meta> HTML tag. It definitely works on texts, images, Etc. Here's how:

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

use these tricks and your website is ready for mobile devices.

Edit: I saw your website. Everything looks fine on my laptop. What exactly is wrong?

Upvotes: 0

Related Questions