Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Submenu as Left menu

    Hi all,

    I am working on creating a site. I required sub menu as left menu. I am working from past week. but i am unable to find out.

    i found one link same what i required but it is not working perfectly. Any ideas on this or any workouts about this...please......

    http://www.foliotek.com/devblog/weeb...nu-via-jquery/

    my site code is as like this i changed a lot but no use. and one more thing i am building site in weebly.

    Code:
    /* General Styling and Structure
    --------------------------------------------------------------------------------*/
    
    h3 {
    	font-size: 1.3em;
    	margin: 0 0 10px 0;
    }
    
    a {
    	text-decoration: none;
    	color: #7c4e9d;
    }
    
    a:hover {
    	color: #b17dd5;
    }
    
    a img {
    	border: 0;
    }
    
    body {
    	margin: 0 auto;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #878787;
    }
    
    h2 {
    	font-size: 24px;
    	margin: 0;
    	padding: .3em 0;
    	line-height: 1.2;
    	font-weight: normal;
    	font-family: "Glegoo", "Myriad Pro", Arial, Helvetica, sans-serif;
    	color: #e99221;
    	-webkit-text-stroke-width: 0.3px;
    }
    
    p {
    	font-size: 1em;
    	line-height: 1.5;
    	margin: 0;
    	padding: .5em 0;
    }
    
    blockquote {
    	font-style:italic;
    	border-left:4px solid #e99221;
    	margin:10px 0 10px 0;
    	padding-left:20px;
    	line-height:1.5;
    	color:#aaa;
    }
    
    hr {background:#ccc !important;}
    
    #content p {
    	color: #878787;
    }
    
    #container {
    	margin: 0 auto;
    	width: 960px;
    }
    
    #headers {
    	clear: both;
    	padding: 0 0 0 19px;
    	border-bottom: 0px solid #ededed;
    	margin-bottom: 0px;
    }
    #header {
    	clear: both;
    	padding: 0 0 0 19px;
    	border-bottom: 8px solid #ededed;
    	margin-bottom: 20px;
    }
    .wsite-logo,
    .wsite-logo a {
    	color: #e99221;
    	margin: 0;
    	padding: 0;
    	text-decoration: none;
    }
    
    .wsite-logo,
    .wsite-logo a:hover {
    	color: #e99221;
    }
    
    #header .wsite-logo {
    	font-size: 36px;
    	color: #e99221;
    	font-family: "Glegoo", Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	float: left;
    	-webkit-text-stroke-width: 0.3px;
    }
    
    #header-right a {
    	color: #7c4e9d;
    }
    
    #header-right a:hover {
    	color: #b17dd5;
    }
    
    /* Header Area
    -------------------------------------------------------------*/
    
    #header {
    	width: 960px;
    	height: 8px;
    	background: #30d8f0;
    }
    #headers {
    	width: 960px;
    	height: 8px;
    	background: #30d8f0;
    }
    
    #header,
    #header table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    #header td {
    	vertical-align: middle;
    	text-align: left;
    }
    
    #logo {
    	padding: 25px 0 25px 22px;
    }
    
    #header-right {
    	padding: 0 0 0 10px;
    }
    
    #header-right table {
    	width: 1px;
    }
    
    #header-right table,
    #header-right .search,
    #header-right .wsite-search {
    	clear: right;
    	float: right;
    }
    
    #header-right td {
    	padding: 0;
    }
    
    /* TOP RIGHT: Phone Number
    --------------------------------------------------------------------------------*/
    
    #header-right .phone-number .wsite-text {
    	color: #878787;
    	font-size: 12px;
    	font-weight: normal;
    	font-family: Arial, Helvetica, sans-serif;
    	display: block;
    	white-space: nowrap;
    	margin: 7px 0 5px 15px;
    }
    
    /* TOP RIGHT: Content Area
    --------------------------------------------------------------------------------*/
    
    #header-right .wsite-social {
    	vertical-align: middle;
    	margin: 5px 0 5px 10px;
    }
    
    
    .wsite-social-item {
    	width: 23px;
    	height: 23px;
    	margin: 0 0 0 3px;
    	background-image:url(social-lightgrey.png);
    }
    
    
    
    /* TOP RIGHT: Search Box
    --------------------------------------------------------------------------------*/
    
    #header-right .search {
    }
    
    #header-right .wsite-search {
    	padding: 5px 0 5px 15px;
    	vertical-align: middle;
    }
    
    #header-right .wsite-search-input {
    	width: 168px;
    	height: 14px;
    	border: none;
    	padding: 8px 10px 8px 15px !important;
    	color: #878787;
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    	background: url(input-bg.png) no-repeat;
    }
    
    #header-right .wsite-search-button {
    	width: 28px;
    	height: 30px;
    	border: none;
    	margin: 0;
    	padding: 0;
    	background: url(submit-bg.png) no-repeat;
    }
    
    /* side-nav
    --------------------------------------------------------------------------------*/
    
    #avmenu {
    	clear: left;
    	float: left;
    	width: 170px;
    	margin: 0px;
    	font-size: 17px;
    	background: #fff;
    	border-right: 3px solid #ededed;
    	
    }
    
    #avmenu ul {
    	list-style: none;
    	width: 170px;
    	margin: 0;
    	padding: 0;
    	background: #fff;
    	}
    
    #avmenu li {
    	list-style: none;
    	padding: 0 0 4px;
    	background: #0000;
    	border-radius: 15px;
    }
    
    #avmenu li a {
    	line-height: 1;
    	text-decoration: none;
    	color: #878787;
    	font-family: "Glegoo", "Myriad Pro", Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	display: block;
    	padding: 10px 5px 12px 22px;
    	border: none;
    	background: #0000;
    	border-radius: 15px;
    }
    
    #avmenu li#active a,
    #avmenu a:hover {
    	color: #fff;
    	background: #30d8f0;
    	-webkit-border-radius: 15px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    }
    
    /* Navigation Drop-Down Menu Customization
    --------------------------------------------------------------------------------*/
    
    #wsite-menus > .wsite-menu-wrap {
    	margin-left: -20px !important;
    }
    
    #wsite-menus .wsite-menu li a {
    	padding: 6px 15px 7px 15px;
    	background: #e99221;
    	border: none;
    	border-bottom: 1px solid #f2af58;
    	text-decoration: none;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #fff;
    	visibility: hidden;
    }
    
    #wsite-menus .wsite-menu li a:hover {
    	color: #fff;
    	background: #d27700;
    }
    /* Navigation
    --------------------------------------------------------------------------------*/
    
    #topnav {
    	clear: left;
    	width: 960px;
    	margin: 0px;
    	font-size: 17px;
    	background: #30d8f0;
    	border-bottom: 8px solid #ededed;
    	overflow: hidden;
    }
    
    #topnav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	background: #fff;
    }
    
    #topnav ul li {
    	list-style: none;
    	float: left;
    	padding: 0 2px 0 0;
    }
    
    #topnav a {
    	float: left;
    	display: block;
    	color: #545454;
    	text-decoration: none;
    	font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
    	padding: 10px 15px 11px;
    	font-size: 13px;
    	border: 0;
    	outline: 0;
    	margin: 0;
    	list-style-type: none;
    	text-transform: uppercase;
    	line-height: 1;
    }
    
    #topnav li#active a,
    #topnav a:hover {
    	color: #fff;
    	background: #10c3dd;
    	-webkit-border-radius: 15px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    }
    
    /****************************** flyout menus ******************************/
    
    #wsite-menus .wsite-menu li a {
    	font-family: Tahoma, Geneva, sans-serif;
    	padding: 9px;
    	color: #545454;
    	background: #e3f3ff;
    	border: 0;
    	border-bottom: 1px solid #b6d2e6;
    }
    
    #wsite-menus .wsite-menu li a:hover {
    	color: #545454;
    	background: #fdfeff;
    }
    
    /* main
    --------------------------------------------------------------------------------*/
    
    #main-wrap {
    }
    
    #main {
    	float: right;
    	width: 780px;
    	margin: 0;
    }
    #mains {
    	float: right;
    	width: 948px;
    	margin: 0;
    }
    
    0#0content {
    	margin: 0;
    	padding: 2px 0;
    	min-height: 400px;
    	overflow-x: visible !important;
    	overflow-x: hidden;
    }
    
    #banner {
    	position: relative;
    }
    
    #tl,
    #tr,
    #bl,
    #br {
    	position: absolute;
    	width: 14px;
    	height: 14px;
    	z-index:2;
    }
    
    #t,
    #r,
    #b,
    #l {
    	position: absolute;
    	z-index:2;
    }
    
    #t {
    	border-top: 1px solid #d6d6d6;
    	width: 100%;
    	background: #fff;
    	height: 3px;
    	left: 14px;
    	top: 0;
    }
    
    #r {
    	border-right: 1px solid #d6d6d6;
    	height: 94%;
    	background: #fff;
    	width: 3px;
    	top: 14px;
    	right: 0;
    }
    
    #b {
    	border-bottom: 1px solid #d6d6d6;
    	width: 97%;
    	background: #fff;
    	height: 3px;
    	left: 14px;
    	bottom: 0;
    }
    
    #l {
    	border-left: 1px solid #d6d6d6;
    	height: 94%;
    	background: #fff;
    	width: 3px;
    	top: 14px;
    	left: 0;
    }
    
    #tl {
    	background: url(tl.png) no-repeat;
    	left: 0;
    	top: 0;
    }
    
    #tr {
    	background: url(tr.png) no-repeat;
    	right: 0;
    	top: 0;
    }
    
    #bl {
    	background: url(bl.png) no-repeat;
    	left: 0;
    	bottom: 0;
    }
    
    #br {
    	background: url(br.png) no-repeat;
    	right: 0;
    	bottom: 0;
    }
    
    .tall-header-page .wsite-header {
    	width: 722px;
    	height: 245px;
    	background: url(banner-tall.jpg) no-repeat;
    }
    
    /* PAGE TYPE: banner-short
    --------------------------------------------------------------------------------*/
    
    .short-header-page .wsite-header {
    	width: 780px;
    	height: 145px;
    	background: url(banner-short.jpg) no-repeat;
    }
    
    .short-header-page #t {
    	width: 770px;
    }
    
    .short-header-page #r {
    	height: 120px;
    }
    
    .short-header-page #b {
    	width: 770px;
    }
    
    .short-header-page #l {
    	height: 120px;
    }
    
    /* TOP RIGHT: banner-landing
    --------------------------------------------------------------------------------*/
    
    .landing-page #banner {
    }
    
    #bannerleft {
    	clear: left;
    	float: left;
    	width: 412px;
    	position: relative;
    }
    
    .landing-page .wsite-header {
    	width: 412px;
    	height: 305px;
    	background: url(banner-landing.jpg) no-repeat;
    }
    
    .landing-banner-outer {
    	display: table;
    	#position: relative;
    	overflow: hidden;
    }
    
    .landing-banner-mid {
    	#position: absolute;
    	#top: 50%;
    	display: table-cell;
    	vertical-align: middle;
    }
    
    .landing-banner-inner {
    	#position: relative;
    	#top: -50%;
    }
    
    #bannerright {
    	float: right;
    	width: 280px;
    	height: 305px;
    	padding: 0 0 0 30px;
    }
    
    #bannerright h2 {
    	color: #e99221;
    	font-size: 24px;
    	font-weight: bold;
    	padding: 0px;
    	line-height: 24px;
    }
    
    #bannerright p {
    	color: #878787;
    	padding: 20px 0px;
    	line-height: 140%;
    	margin: 0;
    }
    
    #bannerright .wsite-button {
    	margin: 0;
    }
    
    /* TOP RIGHT: banner-short
    --------------------------------------------------------------------------------*/
    
    .tall-header-page .wsite-header {
    	width: 722px;
    	height: 245px;
    	background: url(banner-tall.jpg) no-repeat;
    }
    
    .tall-header-page #t {
    	width: 700px;
    }
    
    .tall-header-page #r {
    	height: 220px;
    }
    
    .tall-header-page #b {
    	width: 700px;
    }
    
    .tall-header-page #l {
    	height: 220px;
    }
    
    /* PAGE TYPE: nobanner
    --------------------------------------------------------------------------------*/
    
    .no-header-page #banner {
    	height: auto;
    	padding: 0;
    	display: none;
    }
    
    .no-header-page #content {
    	padding-top: 0;
    }
    
    /* PAGE TYPE: banner-splash
    --------------------------------------------------------------------------------*/
    
    .splash-page {
    	margin: 0 auto;
    	padding: 0;
    	background: #f4f4f4 url(splash-bodybg.jpg) top center repeat-y;
    }
    
    .splash-page #header {
    	width: 570px;
    }
    
    .splash-page #header-right {
    	float: right;
    	padding-right: 8px;
    }
    
    .splash-page #banner {
    	width: 560px;
    	height: 115px;
    	border: none;
    	padding: 5px 0 0 0;
    }
    
    .splash-page .wsite-header {
    	width: 560px;
    	height: 115px;
    	border: none;
    	background: url(banner-splash.jpg) no-repeat;
    }
    
    .splash-page #wrap {
    	width: 560px;
    	padding: 0 10px 0 10px;
    }
    
    .splash-page #content {
    	width: 538px;
    }
    
    .splash-page #footer {
    	width: 560px;
    }
    
    /* Footer
    --------------------------------------------------------------------------------*/
    
    #footer {
    	clear: both;
    	padding: 30px 0 35px 0;
    	color: #878787;
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    	border-top: 8px solid #ededed;
    	text-align: right;
    	visibility: hidden;
    }
    
    #footer p {
    	color: #878787;
    	font-size: 12px;
    }
    
    #footer a {
    	color: #7c4e9d;
    }
    
    #footer a:hover {
    	color: #b17dd5;
    }
    
    #footer span {
    	vertical-align: middle;
    }
    
    #footer h2 {
    	font-size: 18px;
    	padding: .2em 0;
    	line-height: 1.5;
    	font-family: "Glegoo", "Myriad Pro", Arial, Helvetica, sans-serif;
    	color:#777;
    	border-bottom:1px solid #ddd;
    }
    
    .wsite-footer {  /* make sure enough space between element footer and attribution */
    	margin-bottom: 15px;
    }
    
    
    /* Form Customization
    --------------------------------------------------------------------------------*/
    
    .wsite-form-label {
    	display: inline-block;
    	color: #878787;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	padding: 12px 0 5px 0;
    }
    
    .form-radio-container {
    	color: #878787;
    	font-size: 1em;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    .wsite-form-input, .wsite-search-element-input {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	color: #878787;
    	background: #fff url(field.png) repeat-x !important;
    	border: 1px solid #dadada;
    	padding: 8px 4px 5px !important;
    	line-height: 1;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    }
    
    .form-select {
    	color: #878787;
    	border: 1px solid #dadada;
    	font-size: 1em;
    	font-family: Arial, Helvetica, sans-serif;
    	padding: 3px 4px;
    	height: 27px;
    	line-height: 27px;
    	background: #fff url(field.png) repeat-x;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    }
    
    /* Footer Form Customization
    --------------------------------------------------------------------------------*/
    
    .wsite-form-container {
    	margin-top:0px !important;
    	text-align:left;
    }
    
    .wsite-footer .wsite-form-label {
    	font-size: 1em;
    	padding: 5px 0 2px 0;
    }
    
    .wsite-footer .form-radio-container {
    	font-size:1em;
    }
    
    .wsite-footer .wsite-form-input {
    	font-size: 1em;
    	width: 100% !important;
    
    }
    
    .wsite-footer .form-select {
    	width: 100%;
    }
    
    /* Buttons
    --------------------------------------------------------------------------------*/
    
    
    /* small */
    
    .wsite-button {
    	color: #fff !important;
    	font-family: Arial, Helvetica, sans-serif;
    	height: 34px;
    	display: inline-block;
    	font-size: 12px;
    	border: none;
    	font-weight: normal;
    	font-size: 13px;
    	text-decoration: none;
    	padding: 0 15px 0 0;
    	background: url(button_orange.png) no-repeat 100% -105px;
    	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
    }
    
    .wsite-button:hover {
    	background-position: 100% -140px;
    }
    
    .wsite-button:active {
    	background-position: 100% -175px;
    }
    
    .wsite-button-inner {
    	height: 34px;
    	line-height: 34px;
    	display: block;
    	font-size: 14px;
    	font-weight: normal;
    	border: none;
    	text-decoration: none;
    	padding: 0 10px 0 25px;
    	background: url(button_orange.png) no-repeat 0 0;
    }
    
    .wsite-button:hover .wsite-button-inner {
    	background-position: 0 -35px;
    }
    
    .wsite-button:active .wsite-button-inner {
    	background-position: 0 -70px;
    }
    
    /* large */
    
    .wsite-button-large {
    	height: 41px;
    	background: url(button_large_orange.png) no-repeat 100% -126px;
    	padding: 0 15px 0 0;
    }
    
    .wsite-button-large:hover {
    	background-position: 100% -168px;
    }
    
    .wsite-button-large:active {
    	background-position: 100% -210px;
    }
    
    .wsite-button-large .wsite-button-inner {
    	height: 41px;
    	line-height: 41px;
    	padding: 0 10px 0 25px;
    	background: url(button_large_orange.png) no-repeat 0 0;
    }
    
    .wsite-button-large:hover .wsite-button-inner {
    	background-position: 0 -42px;
    }
    
    .wsite-button-large:active .wsite-button-inner {
    	background-position: 0 -84px;
    }
    
    /* highlight */
    
    /*
    Making the highlighted versions of the buttons is easy because we just need
    to switch out the background images. This works because the different button
    states (normal, :hover, :active) have their sprite coordinates in the same places.
    */
    
    .wsite-button-large.wsite-button-highlight {
    	background-image: url(button_large_highlight_orange.png);
    }
    
    .wsite-button-large.wsite-button-highlight .wsite-button-inner {
    	background-image: url(button_large_highlight_orange.png);
    }
    
    .wsite-button-highlight {
    	background-image: url(button_highlight_orange.png);
    }
    
    .wsite-button-highlight .wsite-button-inner {
    	background-image: url(button_highlight_orange.png);
    }
    ul.wsite-menu li { padding-bottom: 5px; } 
    
    .leftmenupage { margin-left: -15px; width:850px; } 
    
    td.leftmenu {
      width: 200px;
      white-space: nowrap;
      padding: 7px 7px;
      vertical-align: top;
      border-radius: 15px;
      background: #ddd;
      color: #333;
      padding: 12px 12px;
      min-width: 200px;
      min-height: 250px;
    } 
    
    td.leftmenu li { padding-bottom: 7px; }
    td.leftmenu a {
      color: #333;
      font-size: 1.33em;
      padding: 5px 0px;
      display: block;
    }
    td.leftmenu a:hover {text-decoration: underline; }
    
    td.leftmenu li a { font-size: 1em; }
    
    td.leftmenu li{
      color: #333;
      font-size: 1em;
      padding: 2px 0px;
    }
    td.leftmenu li li {
      color: #333;
      font-size: 1em;
      padding: 2px 0 2px 15px;
    } 
    
    td.rightcontent {
      width: 75%;
      padding-left:25px;
      width: 650px;
    }
    my site html code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <body class=' no-header-page  wsite-theme-dark'>
    <div id="container">
    	<table id="headers">
    		<tr>
    			<td id="logo">{logo}</td>
    			<td id="header-right">
    				<table>
    					<tr>
    						<td class="phone-number">{phone:text}</td>
    						<td class="social">{social}</td>
    					</tr>
    				</table>
    				<div class="search">{search}</div>
    			</td>
    		</tr>
    	</table>
    	<div id="main-wrap">
    		<div id="topnav">{menu}</div>
    				<div id="mains">
    			<div id="banner">
    				<div class="wsite-header"></div>
    				<em id="tl"></em>
    				<em id="tr"></em>
    				<em id="bl"></em>
    				<em id="br"></em>
    			</div>
    			<div id="content">{content}</div>
    			<div id="footer">{footer}</div>
    		</div>
    		<div style="clear:both;"></div>
    	</div>
    </div>
    <script type="text/javascript">
          // You need this since Weebly uses another JavaScript library
          jQuery.noConflict();        
    
          function AddMenu() {
    
            // Find active link
            var activeLink = jQuery("#active");
            if (activeLink.length == 0) {
              activeLink = jQuery(".wsite-nav-current");
            }       
    
            var linkParent = activeLink;
    
            //find root page
            while (linkParent.parent().parent().hasClass("wsite-menu-wrap")) {
              linkParent = linkParent.parent().parent().parent();
            }
    
            // add menus when there are sub items to the root page -- but don't when there are no children (main page)
            if (linkParent .find("div").length > 0) {
              var contentDiv = jQuery("#wsite-content");
    
              //I add a table structure, which I know isn't the best, but it works well here.
              contentDiv.html("<table class='leftmenupage'><tr><td class='leftmenu'>" + linkParent.html()
                              + "</td><td class='rightcontent'>" + contentDiv.html()+ "</td></tr></table>");
    
              jQuery(".leftmenu div").show();
            }
    
            // Mark main nav link with id="active"
            var linkHref = linkParent.find("a").attr("href");
            var navLinks = jQuery("#navigation a");
            for (var i = 0; i < navLinks.length; i++) {
              if (navLinks.eq(i).attr("href") == linkHref) {
                navLinks.eq(i).parent().attr("id", "active");
              }
            }
    
          } 
    
          AddMenu();
    
     </script>
    </body>
    </html>
    bullet points are coming i dont want that bullet points how can i change this in left menu.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    This is a re-post of this http://www.codingforums.com/showthread.php?t=308169

    Answers were given there.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •